feat: make single selct unselectable

affects: @medly-components/core
medly · Apr 28, 2024 · 9abfba0 · 9abfba0
1 parent 12ea435
commit 9abfba0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/packages/core/src/components/SingleSelect/SingleSelect.stories.mdx b/packages/core/src/components/SingleSelect/SingleSelect.stories.mdx
@@ -23,6 +23,7 @@ The `SingleSelect` component allows you to pick a value from a list of options.
                     onChange={setValue}
                     size={select('Size', sizes, 'M')}
                     isSearchable={boolean('Is Searchable', false)}
+                    isUnselectable={boolean('Is Unselectable', false)}
                     variant={select('Variant', variants, 'filled')}
                     disabled={boolean('Disabled', false)}
                     fullWidth={boolean('Full Width', false)}

diff --git a/packages/core/src/components/SingleSelect/SingleSelect.test.tsx b/packages/core/src/components/SingleSelect/SingleSelect.test.tsx
@@ -210,6 +210,15 @@ describe('SingleSelect component', () => {
         expect(mockOnChange).toHaveBeenCalledWith('Dummy1');
     });
 
+    it('should un select option on click on it again if isUnselectable passed', () => {
+        const mockOnChange = jest.fn();
+        render(<SingleSelect value="Dummy1" isUnselectable options={options} onChange={mockOnChange} />);
+
+        fireEvent.click(screen.getByRole('textbox'));
+        fireEvent.click(screen.getByText('Dummy1'));
+        expect(mockOnChange).toHaveBeenCalledWith('');
+    });
+
     it('should call onChange with input value if input value matches any option label', () => {
         const mockOnChange = jest.fn();
         render(<SingleSelect options={options} onChange={mockOnChange} />);

diff --git a/packages/core/src/components/SingleSelect/SingleSelect.tsx b/packages/core/src/components/SingleSelect/SingleSelect.tsx
@@ -30,6 +30,7 @@ const Component: FC<SingleSelectProps> = memo(
                 validator,
                 isSearchable,
                 suffix,
+                isUnselectable,
                 ...inputProps
             } = props,
             selectId = useMemo(() => id || inputProps.label?.toLocaleLowerCase() || 'medly-singleSelect', [id, inputProps.label]),
@@ -92,13 +93,13 @@ const Component: FC<SingleSelectProps> = memo(
                         setOptions(getUpdatedOptions(options, option));
                         setInputValue(option.label);
                         hideOptions();
-                        onChange?.(option.value);
+                        isUnselectable && value === option.value ? onChange?.('') : onChange?.(option.value);
                         setErrorMessage('');
                     } else {
                         inputRef.current?.focus();
                     }
                 },
-                [inputRef.current, options, onChange]
+                [inputRef.current, value, options, onChange]
             ),
             handleOuterClick = useCallback(() => {
                 isFocused.current = false;
@@ -226,6 +227,7 @@ Component.defaultProps = {
     isSearchable: false,
     includesNestedOptions: false,
     placeholder: 'Please Select . . .',
-    showDecorators: true
+    showDecorators: true,
+    isUnselectable: false
 };
 export const SingleSelect: FC<SingleSelectProps> & WithStyle = Object.assign(Component, { Style: Styled.Wrapper });
diff --git a/packages/core/src/components/SingleSelect/types.ts b/packages/core/src/components/SingleSelect/types.ts
@@ -35,6 +35,8 @@ export interface SingleSelectProps extends InputProps {
     size?: 'S' | 'M';
     /** Set it it true to enable search functionality */
     isSearchable?: boolean;
+    /** Set it true to make it unselectable */
+    isUnselectable?: boolean;
     /** Min width in px/rem/% (1rem = 10px)*/
     minWidth?: string;
     /** Max width in px/rem/% (1rem = 10px)*/