fix(select): use disabled attribute on readonly select

cft-group · Dec 24, 2020 · a813713 · a813713
1 parent f3e042f
commit a813713
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/src/packages/core/src/base-input/BaseInput.tsx b/src/packages/core/src/base-input/BaseInput.tsx
@@ -37,9 +37,9 @@ export function BaseInput<T extends HTMLAttributesComposite>(props: BaseInputPro
         {
           cloneElement<T>(children, {
             className: '_e_input__control',
-            disabled: appearance === 'disabled',
+            disabled: appearance === 'disabled' || (children.type === 'select' && appearance === 'readonly'),
             placeholder: ' ',
-            readOnly: appearance === 'readonly',
+            readOnly: appearance === 'readonly' && children.type !== 'select',
             ...rest,
           })
          }

diff --git a/src/packages/core/src/select/Select.stories.mdx b/src/packages/core/src/select/Select.stories.mdx
@@ -20,3 +20,33 @@ import { Select } from '.';
     ]}
   />
 </Preview>
+
+<Preview>
+  <Select
+    appearance="readonly"
+    label="Option"
+    defaultValue="2"
+    width="4"
+    options={[
+      { value: '', title: '' },
+      { value: '1', title: 'One' },
+      { value: '2', title: 'Two' },
+      { value: '3', title: 'Three' },
+    ]}
+  />
+</Preview>
+
+<Preview>
+  <Select
+    appearance="disabled"
+    label="Option"
+    defaultValue="2"
+    width="4"
+    options={[
+      { value: '', title: '' },
+      { value: '1', title: 'One' },
+      { value: '2', title: 'Two' },
+      { value: '3', title: 'Three' },
+    ]}
+  />
+</Preview>