fix(Select): pass disabled prop to renderControl, don't change state …

…if disabled (#1766)
gravity-ui · Aug 23, 2024 · 24bbb05 · 24bbb05
1 parent 442ce85
commit 24bbb05
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 5 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -129,6 +129,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         open: propsOpen,
         onClose,
         onOpenChange,
+        disabled,
     });
 
     React.useEffect(() => {

diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx
@@ -266,12 +266,13 @@ export const SelectShowcase = (props: SelectProps) => {
                 selectProps={{
                     ...props,
                     className: b('user-control'),
-                    renderControl: ({onClick, onKeyDown, ref, renderClear}) => {
+                    renderControl: ({onClick, onKeyDown, ref, renderClear, disabled}) => {
                         return (
                             <Button
                                 ref={ref}
                                 view="action"
                                 onClick={onClick}
+                                disabled={disabled}
                                 extraProps={{
                                     onKeyDown,
                                 }}
@@ -300,12 +301,13 @@ export const SelectShowcase = (props: SelectProps) => {
                     ...props,
                     className: b('user-control-placement'),
                     popupPlacement: ['bottom'],
-                    renderControl: ({onClick, onKeyDown, ref}) => {
+                    renderControl: ({onClick, onKeyDown, ref, disabled}) => {
                         return (
                             <Button
                                 ref={ref}
                                 view="action"
                                 onClick={onClick}
+                                disabled={disabled}
                                 extraProps={{
                                     onKeyDown,
                                     'aria-label': 'Add',

diff --git a/src/components/Select/__stories__/constants.ts b/src/components/Select/__stories__/constants.ts
@@ -144,12 +144,13 @@ export const EXAMPLE_USER_CONTROL = `const [value, setValue] = React.useState<st
 
 <Select
     value={value}
-    renderControl={({onClick, onKeyDown, ref, renderClear}) => {
+    renderControl={({onClick, onKeyDown, ref, renderClear, disabled}) => {
         return (
             <Button
                 ref={ref}
                 view="action"
                 onClick={onClick}
+                disabled={disabled}
                 extraProps={{
                     onKeyDown,
                 }}
@@ -175,12 +176,13 @@ export const EXAMPLE_USER_CONTROL_WITH_PLACEMENT = `const [value, setValue] = Re
 <Select
     value={value}
     popupPlacement={['bottom']}
-    renderControl={({onClick, onKeyDown, ref}) => {
+    renderControl={({onClick, onKeyDown, ref, disabled}) => {
         return (
             <Button
                 ref={ref}
                 view="action"
                 onClick={onClick}
+                disabled={disabled}
                 extraProps={{
                     onKeyDown,
                 }}

diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -164,6 +164,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                 popupId,
                 selectId,
                 activeIndex,
+                disabled,
             },
             {value},
         );

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -22,6 +22,7 @@ export type SelectRenderControlProps = {
     popupId: string;
     selectId: string;
     activeIndex?: number;
+    disabled?: boolean;
 };
 export type SelectRenderControlOptions = {
     value: SelectProps['value'];

diff --git a/src/hooks/useSelect/types.ts b/src/hooks/useSelect/types.ts
@@ -12,6 +12,7 @@ export type UseSelectProps = {
     defaultValue?: string[];
     multiple?: boolean;
     onUpdate?: (value: string[]) => void;
+    disabled?: boolean;
 } & UseOpenProps;
 
 export type UseSelectResult<T> = {

diff --git a/src/hooks/useSelect/useSelect.ts b/src/hooks/useSelect/useSelect.ts
@@ -14,8 +14,9 @@ export const useSelect = <T extends unknown>({
     defaultValue = [],
     multiple,
     onUpdate,
+    disabled,
 }: UseSelectProps): UseSelectResult<T> => {
-    const [value, setValue] = useControlledState(valueProps, defaultValue, onUpdate);
+    const [value, setValueInner] = useControlledState(valueProps, defaultValue, onUpdate);
     const [activeIndex, setActiveIndex] = React.useState<number>();
     const {toggleOpen, ...openState} = useOpenState({
         defaultOpen,
@@ -24,6 +25,15 @@ export const useSelect = <T extends unknown>({
         open,
     });
 
+    const setValue = React.useCallback(
+        (v: string[]) => {
+            if (!disabled) {
+                setValueInner(v);
+            }
+        },
+        [setValueInner, disabled],
+    );
+
     const handleSingleSelection = React.useCallback(
         (option: UseSelectOption<T>) => {
             if (!value.includes(option.value)) {