useImperativeHandle hook in Select.tsx component - add Dependency list passed as the third param to re-create the handle when one of them updates.

Author: based-ghost

__tests__/AutosizeInput.test.tsx

@@ -1,8 +1,8 @@
 import { ThemeTestHOC } from './helpers';
 import userEvent from '@testing-library/user-event';
 import { render, fireEvent } from '@testing-library/react';
+import { AUTOSIZE_INPUT_CLS, AUTOSIZE_INPUT_TESTID } from '../src/constants';
 import AutosizeInput, { AutosizeInputProps } from '../src/components/input/AutosizeInput';
-import { EMPTY_ARRAY, AUTOSIZE_INPUT_CLS, AUTOSIZE_INPUT_TESTID } from '../src/constants';
 
 import type { RenderResult } from '@testing-library/react';
 
@@ -29,7 +29,7 @@ const createAutosizeInputProps = () => {
     onBlur: onBlurSpy,
     onFocus: onFocusSpy,
     onChange: onChangeSpy,
-    selectedOption: EMPTY_ARRAY
+    hasSelectedOptions: false
   };
 
   return {

docs/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.js": "./main.eeb30b91.iframe.bundle.js",
+    "main.js": "./main.5ac201dc.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.js": "./vendors~main.31a06b8d.iframe.bundle.js",
     "vendors~main.js.map": "./vendors~main.31a06b8d.iframe.bundle.js.map",
@@ -10,6 +10,6 @@
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.31a06b8d.iframe.bundle.js",
-    "main.eeb30b91.iframe.bundle.js"
+    "main.5ac201dc.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.eeb30b91.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.5ac201dc.iframe.bundle.js"></script></body></html>

docs/main.5ac201dc.iframe.bundle.js

@@ -417,39 +417,39 @@ const Select = forwardRef<SelectRef, SelectProps>((
     }
   }, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelect]);
 
+  const hasSelectedOptions = isArrayWithLength(selectedOption);
+
   /**
    * useImperativeHandle.
    * Exposed API methods/properties available on a ref instance of this Select.tsx component.
+   * Dependency list passed as the third param to re-create the handle when one of them updates.
    */
-  useImperativeHandle(ref, () => ({
-    empty: !isArrayWithLength(selectedOption),
-    menuOpen,
-    blur: blurInput,
-    focus: focusInput,
-    clearValue: () => {
-      if (selectOption.length)
+  useImperativeHandle(
+    ref,
+    () => ({
+      empty: !hasSelectedOptions,
+      menuOpen: menuOpenRef.current,
+      blur: blurInput,
+      focus: focusInput,
+      clearValue: () => {
         setSelectedOption(EMPTY_ARRAY);
-      if (focusedOption.data)
         setFocusedOption(FOCUSED_OPTION_DEFAULT);
-    },
-    setValue: (option?: OptionData) => {
-      const normalizedOptions = normalizeValue(
-        option,
-        getOptionValueFn,
-        getOptionLabelFn
-      );
-
-      setSelectedOption(normalizedOptions);
-    },
-    toggleMenu: (state?: boolean) => {
-      if (state === true || (state === undefined && !menuOpen)) {
-        !isFocused && focusInput();
-        openMenuAndFocusOption(OptionIndexEnum.FIRST);
-      } else {
-        blurInput();
+      },
+      setValue: (option?: OptionData) => {
+        const normalizedOptions = normalizeValue(option, getOptionValueFn, getOptionLabelFn);
+        setSelectedOption(normalizedOptions);
+      },
+      toggleMenu: (state?: boolean) => {
+        if (state === true || (state === undefined && !menuOpenRef.current)) {
+          focusInput();
+          openMenuAndFocusOption(OptionIndexEnum.FIRST);
+        } else {
+          blurInput();
+        }
       }
-    }
-  }));
+    }),
+    [hasSelectedOptions, getOptionValueFn, getOptionLabelFn, openMenuAndFocusOption]
+  );
 
   /**
    * useMountEffect:
@@ -543,7 +543,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
 
   // Only Multiselect mode supports value focusing
   const focusValueOnArrowKey = (direction: ValueIndexEnum): void => {
-    if (!isArrayWithLength(selectedOption)) return;
+    if (!hasSelectedOptions) return;
 
     let nextFocusedIdx = -1;
     const lastValueIdx = selectedOption.length - 1;
@@ -662,7 +662,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
           setFocusedMultiValue(nexFocusedMultiValue);
         } else {
           if (!backspaceClearsValue) return;
-          if (!isArrayWithLength(selectedOption)) break;
+          if (!hasSelectedOptions) break;
 
           if (isMulti && !renderMultiOptions) {
             const { value } = selectedOption[selectedOption.length - 1];
@@ -735,8 +735,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, []);
 
   const renderMenu = !lazyLoadMenu || (lazyLoadMenu && menuOpen);
+  const showClear = !!(isClearable && !isDisabled && hasSelectedOptions);
   const inputReadOnly = isDisabled || !isSearchable || !!focusedMultiValue;
-  const showClear = !!(isClearable && !isDisabled && isArrayWithLength(selectedOption));
   const handleOnCaretMouseDownOrNoop = (!isDisabled && !openMenuOnClick) ? handleOnCaretMouseDown : undefined;
 
   return (
@@ -779,7 +779,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
               onFocus={handleOnInputFocus}
               onChange={handleOnInputChange}
               ariaLabelledBy={ariaLabelledBy}
-              selectedOption={selectedOption}
+              hasSelectedOptions={hasSelectedOptions}
             />
           </ValueWrapper>
           <IndicatorIcons

docs/main.eeb30b91.iframe.bundle.js

@@ -1,10 +1,9 @@
 import React, { memo, useRef, useState, Fragment, forwardRef } from 'react';
 import styled from 'styled-components';
 import { useUpdateEffect } from '../../hooks';
+import { IS_MICROSOFT_BROWSER } from '../../utils';
 import { AUTOSIZE_INPUT_ATTRS } from '../../constants';
-import { isArrayWithLength, IS_MICROSOFT_BROWSER } from '../../utils';
 
-import type { SelectedOption } from '../../types';
 import type { Ref, FormEventHandler, FocusEventHandler } from 'react';
 
 export type AutosizeInputProps = Readonly<{
@@ -14,7 +13,7 @@ export type AutosizeInputProps = Readonly<{
   inputValue: string;
   required?: boolean;
   ariaLabelledBy?: string;
-  selectedOption: SelectedOption[];
+  hasSelectedOptions: boolean;
   onBlur: FocusEventHandler<HTMLInputElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onChange: FormEventHandler<HTMLInputElement>;
@@ -73,13 +72,13 @@ const AutosizeInput = memo(
       ariaLabel,
       inputValue,
       ariaLabelledBy,
-      selectedOption
+      hasSelectedOptions
     },
     ref: Ref<HTMLInputElement>
   ) => {
     const sizerRef = useRef<HTMLDivElement | null>(null);
     const [inputWidth, setInputWidth] = useState<number>(INPUT_MIN_WIDTH_PX);
-    const isInvalid = !!required && !isArrayWithLength(selectedOption);
+    const isInvalid = !!required && !hasSelectedOptions;
 
     useUpdateEffect(() => {
       if (sizerRef.current) {