fix(select): error with disabled

ovh · Jul 29, 2024 · 19711e3 · 19711e3
1 parent 35eca3b
commit 19711e3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.scss b/packages/ods/src/components/select/src/components/ods-select/ods-select.scss
@@ -279,7 +279,7 @@ $select-padding-right: $select-caret-size + ($select-base-padding * 2);
 }
 
 // Double class to give more weight than base override
-:host(.ods-select.ods-select--error) {
+:host(:not(.ods-select--disabled).ods-select.ods-select--error) {
   .ts-control {
     @include input.ods-input-error();
   }

diff --git a/packages/ods/src/components/select/src/components/ods-select/ods-select.tsx b/packages/ods/src/components/select/src/components/ods-select/ods-select.tsx
@@ -287,6 +287,7 @@ export class OdsSelect {
       <Host
         class={{
           'ods-select': true,
+          'ods-select--disabled': this.isDisabled,
           'ods-select--dropdown-width-auto': this.dropdownWidth === 'auto',
           'ods-select--error': this.hasError,
           [`ods-select--border-rounded-${this.borderRounded}`]: true,

diff --git a/packages/ods/src/components/select/src/index.html b/packages/ods/src/components/select/src/index.html
@@ -47,6 +47,16 @@
     <option value="goldfish">Goldfish</option>
   </ods-select>
 
+  <p>Disabled & Error</p>
+  <ods-select is-disabled has-error>
+    <option value="dog">Dog</option>
+    <option value="cat">Cat</option>
+    <option value="hamster">Hamster</option>
+    <option value="parrot">Parrot</option>
+    <option value="spider">Spider</option>
+    <option value="goldfish">Goldfish</option>
+  </ods-select>
+
   <p>Has error</p>
   <ods-select has-error>
     <option value="dog">Dog</option>