feat(BoemlyFormControl): Add disabled option to select options

treely · Aug 31, 2022 · c7b8fec · c7b8fec · vercel · Aug 31, 2022
1 parent a804ef5
commit c7b8fec
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.stories.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.stories.tsx
@@ -102,6 +102,16 @@ Select.args = {
   ],
 };
 
+export const SelectWithDisabledOption = Template.bind({});
+SelectWithDisabledOption.args = {
+  id: 'select',
+  inputType: 'Select',
+  selectOptions: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2', disabled: true },
+  ],
+};
+
 export const Checkbox = Template.bind({});
 Checkbox.args = {
   id: 'checkbox',

diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.test.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.test.tsx
@@ -30,11 +30,17 @@ describe('The BoemlyFormControl component', () => {
   it('displays a select field if inputType select is given', () => {
     setup({
       inputType: 'Select',
-      selectOptions: [{ value: 'value', label: 'Label' }],
+      selectOptions: [
+        { value: 'value-1', label: 'Label 1' },
+        { value: 'value-2', label: 'Label 2', disabled: true },
+      ],
     });
 
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-    expect(screen.getByRole('option')).toHaveAttribute('value', 'value');
+    expect(screen.getAllByRole('option')[0]).toHaveAttribute('value', 'value-1');
+    expect(screen.getAllByRole('option')[0]).not.toHaveAttribute('disabled');
+    expect(screen.getAllByRole('option')[1]).toHaveAttribute('value', 'value-2');
+    expect(screen.getAllByRole('option')[1]).toHaveAttribute('disabled');
   });
 
   it('displays a checkbox field if the inputType checkbox is given', () => {

diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.tsx
@@ -36,7 +36,7 @@ export interface BoemlyFormControlProps extends StyleProps {
   inputProps?: InputProps;
   numberInputProps?: NumberInputProps;
   selectProps?: SelectProps;
-  selectOptions?: { value: string; label: string }[];
+  selectOptions?: { value: string; label: string; disabled?: boolean }[];
   checkboxProps?: CheckboxProps;
 
   // Inner input elements
@@ -96,7 +96,11 @@ export const BoemlyFormControl: React.FC<BoemlyFormControlProps> = ({
         return (
           <Select bgColor="white" {...selectProps}>
             {selectOptions.map((selectOption) => (
-              <option key={selectOption.value} value={selectOption.value}>
+              <option
+                key={selectOption.value}
+                value={selectOption.value}
+                disabled={selectOption.disabled}
+              >
                 {selectOption.label}
               </option>
             ))}