FIX: in method "handleOnControlMouseDown" of "Select.tsx" component -…

… change check from e.currentTarget.tagName to e.target.nodeName (using currentTarget only returns the element for which the eventListener is attached to and we need to determine which element the mousedown event was triggered on, truly).

.storybook/preview.tsx

@@ -2,21 +2,21 @@ import ReactDOM from 'react-dom';
 import { GlobalStyle } from './global-style';
 
 // Configure createGlobalStyle for styled-components
-const GS_NODE_ID = 'temp2-global-style';
+const gsNodeId = 'temp2-global-style';
 
-const GS_NODE =
-  document.getElementById(GS_NODE_ID) ||
+const gsNode =
+  document.getElementById(gsNodeId) ||
   (() => {
     const el = document.createElement('div');
-    el.id = GS_NODE_ID;
+    el.id = gsNodeId;
     document.head.appendChild(el);
     return el;
   })();
 
 // Callback to remove node used to mount GlobalStyle to
 const rendererCallbackFn = () => {
-  GS_NODE && document.head.removeChild(GS_NODE);
+  gsNode && document.head.removeChild(gsNode);
 };
 
 // Mount GlobalStyle to gsNode and then execute callback rendererCallbackFn()
-ReactDOM.render(<GlobalStyle />, GS_NODE, rendererCallbackFn);
+ReactDOM.render(<GlobalStyle />, gsNode, rendererCallbackFn);

docs/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.js": "./main.19f16206.iframe.bundle.js",
+    "main.js": "./main.42c8e3db.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",
+    "vendors~main.js": "./vendors~main.2114af7b.iframe.bundle.js",
+    "vendors~main.js.map": "./vendors~main.2114af7b.iframe.bundle.js.map",
     "iframe.html": "./iframe.html",
-    "vendors~main.31a06b8d.iframe.bundle.js.LICENSE.txt": "./vendors~main.31a06b8d.iframe.bundle.js.LICENSE.txt"
+    "vendors~main.2114af7b.iframe.bundle.js.LICENSE.txt": "./vendors~main.2114af7b.iframe.bundle.js.LICENSE.txt"
   },
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
-    "vendors~main.31a06b8d.iframe.bundle.js",
-    "main.19f16206.iframe.bundle.js"
+    "vendors~main.2114af7b.iframe.bundle.js",
+    "main.42c8e3db.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.19f16206.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.2114af7b.iframe.bundle.js"></script><script src="main.42c8e3db.iframe.bundle.js"></script></body></html>

package.json

@@ -37,15 +37,15 @@
     "functional"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.13.16",
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@babel/runtime": "^7.13.10",
+    "@babel/runtime": "^7.13.17",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@rollup/plugin-typescript": "^8.2.1",
@@ -55,7 +55,7 @@
     "@storybook/react": "^6.2.8",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.4",
+    "@testing-library/user-event": "^13.1.5",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.41",
     "@types/react": "^17.0.3",

src/Select.tsx

@@ -159,7 +159,7 @@ export type SelectProps = Readonly<{
   getIsOptionDisabled?: (data: OptionData) => boolean;
   getFilterOptionString?: (option: MenuOption) => string;
   renderMultiOptions?: (params: MultiParams) => ReactNode;
-  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>, input?: string, focusedOption?: FocusedOption) => any;
+  onKeyDown?: (e: KeyboardEvent<Element>, input?: string, focusedOption?: FocusedOption) => any;
 }>;
 
 interface ControlWrapperProps extends Pick<SelectProps, 'isInvalid' | 'isDisabled'> {
@@ -373,6 +373,9 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const focusInput = (): void => inputRef.current?.focus();
   const scrollToItemIndex = (index: number): void => listRef.current?.scrollToItem(index);
 
+  const hasSelectedOptions = isArrayWithLength(selectedOption);
+  const blurInputOnSelectOrDefault = isBoolean(blurInputOnSelect) ? blurInputOnSelect : IS_TOUCH_DEVICE;
+
   const openMenuAndFocusOption = useCallback((position: OptionIndexEnum): void => {
     if (!isArrayWithLength(menuOptions)) {
       !menuOpenRef.current && setMenuOpen(true);
@@ -405,20 +408,13 @@ const Select = forwardRef<SelectRef, SelectProps>((
       setSelectedOption((prev) => !isMulti ? [option] : [...prev, option]);
     }
 
-    // Use 'blurInputOnSelect' if defined, otherwise evaluate to true if current device is touch-device
-    const blurControl = isBoolean(blurInputOnSelect)
-      ? blurInputOnSelect
-      : IS_TOUCH_DEVICE;
-
-    if (blurControl) {
+    if (blurInputOnSelectOrDefault) {
       blurInput();
     } else if (closeMenuOnSelect) {
       setMenuOpen(false);
       setInputValue('');
     }
-  }, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelect]);
-
-  const hasSelectedOptions = isArrayWithLength(selectedOption);
+  }, [isMulti, closeMenuOnSelect, removeSelectedOption, blurInputOnSelectOrDefault]);
 
   /**
    * useImperativeHandle.
@@ -593,7 +589,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
     menuOpen ? focusOptionOnArrowKey(downUpIndex) : openMenuAndFocusOption(posIndex);
   };
 
-  const handleOnKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+  const handleOnKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
     if (isDisabled) return;
 
     if (onKeyDown) {
@@ -610,10 +606,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
       case 'ArrowLeft':
       case 'ArrowRight': {
         if (!isMulti || inputValue || renderMultiOptions) return;
-
         const leftRightIndex = e.key === 'ArrowLeft' ? ValueIndexEnum.PREVIOUS : ValueIndexEnum.NEXT;
         focusValueOnArrowKey(leftRightIndex);
-
         break;
       }
       // Handle spacebar keydown events
@@ -640,7 +634,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
           setMenuOpen(false);
           setInputValue('');
         }
-
         break;
       }
       case 'Tab': {
@@ -655,9 +648,10 @@ const Select = forwardRef<SelectRef, SelectProps>((
         if (focusedMultiValue) {
           const clearFocusedIndex = selectedOption.findIndex((x) => x.value === focusedMultiValue);
 
-          const nexFocusedMultiValue = (clearFocusedIndex > -1 && (clearFocusedIndex < (selectedOption.length - 1)))
-            ? selectedOption[clearFocusedIndex + 1].value!
-            : null;
+          const nexFocusedMultiValue =
+            (clearFocusedIndex > -1 && (clearFocusedIndex < (selectedOption.length - 1)))
+              ? selectedOption[clearFocusedIndex + 1].value!
+              : null;
 
           removeSelectedOption(focusedMultiValue);
           setFocusedMultiValue(nexFocusedMultiValue);
@@ -682,23 +676,24 @@ const Select = forwardRef<SelectRef, SelectProps>((
     e.preventDefault();
   };
 
-  const handleOnControlMouseDown = (e: MouseOrTouchEvent<HTMLDivElement>): void => {
+  const handleOnControlMouseDown = (e: MouseOrTouchEvent<HTMLElement>): void => {
     if (isDisabled) return;
     if (!isFocused) focusInput();
 
-    const targetIsNotInput = e.currentTarget.tagName !== 'INPUT';
+    const evtTarget = e.target as HTMLElement;
+    const isNotInput = evtTarget.nodeName !== 'INPUT';
 
     if (!menuOpen) {
       openMenuOnClick && openMenuAndFocusOption(OptionIndexEnum.FIRST);
-    } else if (targetIsNotInput) {
+    } else if (isNotInput) {
       menuOpen && setMenuOpen(false);
       inputValue && setInputValue('');
     }
 
-    if (targetIsNotInput) e.preventDefault();
+    if (isNotInput) e.preventDefault();
   };
 
-  const handleOnMenuMouseDown = (e: MouseOrTouchEvent<HTMLDivElement>): void => {
+  const handleOnMenuMouseDown = (e: MouseOrTouchEvent<HTMLElement>): void => {
     suppressEvent(e);
     focusInput();
   };
@@ -723,13 +718,13 @@ const Select = forwardRef<SelectRef, SelectProps>((
     !menuOpenRef.current && setMenuOpen(true);
   }, [onInputChange]);
 
-  const handleOnCaretMouseDown = useCallback((e: MouseOrTouchEvent<HTMLDivElement>): void => {
+  const handleOnCaretMouseDown = useCallback((e: MouseOrTouchEvent<HTMLElement>): void => {
     focusInput();
     menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
     suppressEvent(e);
   }, [openMenuAndFocusOption]);
 
-  const handleOnClearMouseDown = useCallback((e: MouseOrTouchEvent<HTMLDivElement>): void => {
+  const handleOnClearMouseDown = useCallback((e: MouseOrTouchEvent<HTMLElement>): void => {
     focusInput();
     setSelectedOption(EMPTY_ARRAY);
     suppressEvent(e);

src/components/indicators/ClearSvgIcon.tsx

@@ -6,8 +6,6 @@ import type { FunctionComponent } from 'react';
 
 const ClearSvg = styled.svg`
   fill: currentColor;
-  will-change: opacity, color;
-
   ${({ theme }) => css`
     width: ${theme.icon.clear.width};
     height: ${theme.icon.clear.height};

src/components/indicators/IndicatorIcons.tsx

@@ -45,7 +45,6 @@ const IndicatorIcon = styled.div`
 `;
 
 const Caret = styled.div<Pick<IndicatorIconsProps, 'menuOpen' | 'isInvalid'>>`
-  will-change: transform, color;
   transition: ${({ theme }) => theme.icon.caret.transition};
   border-top: ${({ theme }) => theme.icon.caret.size} dashed;
   border-left: ${({ theme }) => theme.icon.caret.size} solid transparent;

src/components/indicators/LoadingDots.tsx

@@ -14,7 +14,6 @@ const StyledLoadingDots = styled.div`
   > div {
     border-radius: 100%;
     display: inline-block;
-    will-change: transform;
 
     ${({ theme: { loader } }) => css`
       width: ${loader.size};

src/components/menu/Menu.tsx

@@ -32,7 +32,6 @@ const MenuWrapper = styled.div<MenuWrapperProps>`
   z-index: 999;
   cursor: default;
   position: absolute;
-  will-change: opacity;
 
   ${({ menuTop, menuOpen, hideNoOptionsMsg, theme: { menu } }) => css`
     width: ${menu.width};

src/components/value/Value.tsx

@@ -56,15 +56,16 @@ const Value = memo<ValueProps>(({
 }) => {
   // Do not apply Placeholder animation on initial render/mount of component
   const isFirstRender = useFirstRenderState();
+  const noSelectedOptions = !isArrayWithLength(selectedOption);
 
   if (
     inputValue &&
-    (!isMulti || (isMulti && (!isArrayWithLength(selectedOption) || renderMultiOptions)))
+    (!isMulti || (isMulti && (noSelectedOptions || renderMultiOptions)))
   ) {
     return null;
   }
 
-  if (!isArrayWithLength(selectedOption)) {
+  if (noSelectedOptions) {
     return (
       <Placeholder isFirstRender={isFirstRender}>
         {placeholder}

src/hooks/useDebounce.ts

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import useUpdateEffect from './useUpdateEffect';
 
 /**
  * useDebounce hook
@@ -9,7 +10,7 @@ import { useEffect, useState } from 'react';
 const useDebounce = <T>(value: T, delay: number = 0): T => {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     if (delay <= 0) return;
 
     const handler = setTimeout(() => {

src/types/index.d.ts

@@ -22,10 +22,7 @@ export type OptionFilterCallback = (option: MenuOption) => string;
 export type OptionDisabledCallback = (data: OptionData) => boolean;
 
 export type MouseOrTouchEvent<T = Element> = MouseEvent<T> | TouchEvent<T>;
-export type MouseOrTouchEventHandler = EventHandler<MouseOrTouchEvent<Element>>;
-
-export type IndicatorIconEvent<T = Element> = MouseOrTouchEvent<T> | KeyboardEvent<T>;
-export type IndicatorIconEventHandler = EventHandler<IndicatorIconEvent<Element>>;
+export type MouseOrTouchEventHandler<T = Element> = EventHandler<MouseOrTouchEvent<T>>;
 
 export type TestableElement = {
   'data-testid'?: string;

src/utils/menu.ts

@@ -123,7 +123,8 @@ export const menuFitsBelowControl = (el: Element | null): boolean => {
 
   const scrollParent = getScrollParent(el);
   const { top, height } = el.getBoundingClientRect();
-  const spaceBelow = scrollParent.getBoundingClientRect().height - getScrollTop(scrollParent) - top;
+  const { height: scrollParentHeight } = scrollParent.getBoundingClientRect();
+  const spaceBelow = scrollParentHeight - getScrollTop(scrollParent) - top;
 
   return spaceBelow >= height;
 };
@@ -172,5 +173,10 @@ export const scrollMenuIntoViewOnOpen = (
   const marginBottom = parseInt(marginBottomStyle, 10);
   const scrollDown = bottom - viewInner + scrollTop + marginBottom;
 
-  smoothScrollTo(scrollParent, scrollDown, menuScrollDuration, handleOnMenuOpen);
+  smoothScrollTo(
+    scrollParent,
+    scrollDown,
+    menuScrollDuration,
+    handleOnMenuOpen
+  );
 };