@rc-component/select 1.0.3 → 1.0.4

package/es/BaseSelect/index.js

@@ -4,6 +4,7 @@ import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import useMergedState from "@rc-component/util/es/hooks/useMergedState";
 import isMobile from "@rc-component/util/es/isMobile";
 import { useComposeRef } from "@rc-component/util/es/ref";
+import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
 import * as React from 'react';
 import { useAllowClear } from "../hooks/useAllowClear";
 import { BaseSelectContext } from "../hooks/useBaseProps";
@@ -109,11 +110,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ============================== Refs ==============================
   const containerRef = React.useRef(null);
-  const selectorDomRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const selectorRef = React.useRef(null);
   const listRef = React.useRef(null);
   const blurRef = React.useRef(false);
+  const customDomRef = React.useRef(null);
 
   /** Used for component focused management */
   const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
@@ -123,7 +124,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     focus: selectorRef.current?.focus,
     blur: selectorRef.current?.blur,
     scrollTo: arg => listRef.current?.scrollTo(arg),
-    nativeElement: containerRef.current || selectorDomRef.current
+    nativeElement: containerRef.current || selectorRef.current?.nativeElement || getDOM(customDomRef.current)
   }));
 
   // ========================== Search Value ==========================
@@ -141,7 +142,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Used for customize replacement for `rc-cascader`
   const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
-  const customizeRawInputRef = useComposeRef(selectorDomRef, customizeRawInputElement?.props?.ref);
+  const customizeRawInputRef = useComposeRef(customDomRef, customizeRawInputElement?.props?.ref);
 
   // ============================== Open ==============================
   // SSR not support Portal which means we need delay `open` for the first time render
@@ -504,11 +505,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     builtinPlacements: builtinPlacements,
     getPopupContainer: getPopupContainer,
     empty: emptyOptions,
-    getTriggerDOMNode: node =>
-    // TODO: This is workaround and should be removed in `rc-select`
-    // And use new standard `nativeElement` for ref.
-    // But we should update `rc-resize-observer` first.
-    selectorDomRef.current || node,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
@@ -516,7 +512,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
     prefixClassName: classNames?.prefix,
     prefixStyle: styles?.prefix,
-    domRef: selectorDomRef,
     prefixCls: prefixCls,
     inputElement: customizeInputElement,
     ref: selectorRef,

package/es/OptionList.js

@@ -130,9 +130,10 @@ const OptionList = (_, ref) => {
     const timeoutId = setTimeout(() => {
       if (!multiple && open && rawValues.size === 1) {
         const value = Array.from(rawValues)[0];
+        // Scroll to the option closest to the searchValue if searching.
         const index = memoFlattenOptions.findIndex(({
           data
-        }) => data.value === value);
+        }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
         if (index !== -1) {
           setActive(index);
           scrollIntoView(index);

package/es/SelectTrigger.d.ts

@@ -22,7 +22,6 @@ export interface SelectTriggerProps {
     getPopupContainer?: RenderDOMFunc;
     popupAlign: AlignType;
     empty: boolean;
-    getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
 }

package/es/SelectTrigger.js

@@ -63,7 +63,6 @@ const SelectTrigger = (props, ref) => {
     popupAlign,
     getPopupContainer,
     empty,
-    getTriggerDOMNode,
     onPopupVisibleChange,
     onPopupMouseEnter,
     ...restProps
@@ -127,7 +126,6 @@ const SelectTrigger = (props, ref) => {
       [`${popupPrefixCls}-empty`]: empty
     }),
     popupStyle: mergedPopupStyle,
-    getTriggerDOMNode: getTriggerDOMNode,
     onPopupVisibleChange: onPopupVisibleChange
   }), children);
 };

package/es/Selector/index.d.ts

@@ -40,6 +40,7 @@ export interface RefSelectorProps {
     focus: (options?: FocusOptions) => void;
     blur: () => void;
     scrollTo?: ScrollTo;
+    nativeElement: HTMLDivElement;
 }
 export interface SelectorProps {
     prefixClassName: string;
@@ -77,11 +78,6 @@ export interface SelectorProps {
     onRemove: (value: DisplayValueType) => void;
     onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onInputBlur?: () => void;
-    /**
-     * @private get real dom for trigger align.
-     * This may be removed after React provides replacement of `findDOMNode`
-     */
-    domRef: React.Ref<HTMLDivElement>;
 }
 declare const ForwardSelector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<RefSelectorProps>>;
 export default ForwardSelector;

package/es/Selector/index.js

@@ -35,18 +35,19 @@ const Selector = (props, ref) => {
     onSearchSubmit,
     onToggleOpen,
     onInputKeyDown,
-    onInputBlur,
-    domRef
+    onInputBlur
   } = props;
 
   // ======================= Ref =======================
+  const containerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
     focus: options => {
       inputRef.current.focus(options);
     },
     blur: () => {
       inputRef.current.blur();
-    }
+    },
+    nativeElement: containerRef.current
   }));
 
   // ====================== Input ======================
@@ -172,7 +173,7 @@ const Selector = (props, ref) => {
   };
   const selectNode = mode === 'multiple' || mode === 'tags' ? /*#__PURE__*/React.createElement(MultipleSelector, _extends({}, props, sharedProps)) : /*#__PURE__*/React.createElement(SingleSelector, _extends({}, props, sharedProps));
   return /*#__PURE__*/React.createElement("div", {
-    ref: domRef,
+    ref: containerRef,
     className: `${prefixCls}-selector`,
     onClick: onClick,
     onMouseDown: onMouseDown

package/lib/BaseSelect/index.js

@@ -9,6 +9,7 @@ var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/ho
 var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
 var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
 var _ref = require("@rc-component/util/lib/ref");
+var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
 var React = _interopRequireWildcard(require("react"));
 var _useAllowClear = require("../hooks/useAllowClear");
 var _useBaseProps = require("../hooks/useBaseProps");
@@ -119,11 +120,11 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // ============================== Refs ==============================
   const containerRef = React.useRef(null);
-  const selectorDomRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const selectorRef = React.useRef(null);
   const listRef = React.useRef(null);
   const blurRef = React.useRef(false);
+  const customDomRef = React.useRef(null);
 
   /** Used for component focused management */
   const [mockFocused, setMockFocused, cancelSetMockFocused] = (0, _useDelayReset.default)();
@@ -133,7 +134,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     focus: selectorRef.current?.focus,
     blur: selectorRef.current?.blur,
     scrollTo: arg => listRef.current?.scrollTo(arg),
-    nativeElement: containerRef.current || selectorDomRef.current
+    nativeElement: containerRef.current || selectorRef.current?.nativeElement || (0, _findDOMNode.getDOM)(customDomRef.current)
   }));
 
   // ========================== Search Value ==========================
@@ -151,7 +152,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Used for customize replacement for `rc-cascader`
   const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
-  const customizeRawInputRef = (0, _ref.useComposeRef)(selectorDomRef, customizeRawInputElement?.props?.ref);
+  const customizeRawInputRef = (0, _ref.useComposeRef)(customDomRef, customizeRawInputElement?.props?.ref);
 
   // ============================== Open ==============================
   // SSR not support Portal which means we need delay `open` for the first time render
@@ -514,11 +515,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     builtinPlacements: builtinPlacements,
     getPopupContainer: getPopupContainer,
     empty: emptyOptions,
-    getTriggerDOMNode: node =>
-    // TODO: This is workaround and should be removed in `rc-select`
-    // And use new standard `nativeElement` for ref.
-    // But we should update `rc-resize-observer` first.
-    selectorDomRef.current || node,
     onPopupVisibleChange: onTriggerVisibleChange,
     onPopupMouseEnter: onPopupMouseEnter
   }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
@@ -526,7 +522,6 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   })) : /*#__PURE__*/React.createElement(_Selector.default, _extends({}, props, {
     prefixClassName: classNames?.prefix,
     prefixStyle: styles?.prefix,
-    domRef: selectorDomRef,
     prefixCls: prefixCls,
     inputElement: customizeInputElement,
     ref: selectorRef,

package/lib/OptionList.js

@@ -138,9 +138,10 @@ const OptionList = (_, ref) => {
     const timeoutId = setTimeout(() => {
       if (!multiple && open && rawValues.size === 1) {
         const value = Array.from(rawValues)[0];
+        // Scroll to the option closest to the searchValue if searching.
         const index = memoFlattenOptions.findIndex(({
           data
-        }) => data.value === value);
+        }) => searchValue ? String(data.value).startsWith(searchValue) : data.value === value);
         if (index !== -1) {
           setActive(index);
           scrollIntoView(index);

package/lib/SelectTrigger.d.ts

@@ -22,7 +22,6 @@ export interface SelectTriggerProps {
     getPopupContainer?: RenderDOMFunc;
     popupAlign: AlignType;
     empty: boolean;
-    getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
     onPopupVisibleChange?: (visible: boolean) => void;
     onPopupMouseEnter: () => void;
 }

package/lib/SelectTrigger.js

@@ -72,7 +72,6 @@ const SelectTrigger = (props, ref) => {
     popupAlign,
     getPopupContainer,
     empty,
-    getTriggerDOMNode,
     onPopupVisibleChange,
     onPopupMouseEnter,
     ...restProps
@@ -136,7 +135,6 @@ const SelectTrigger = (props, ref) => {
       [`${popupPrefixCls}-empty`]: empty
     }),
     popupStyle: mergedPopupStyle,
-    getTriggerDOMNode: getTriggerDOMNode,
     onPopupVisibleChange: onPopupVisibleChange
   }), children);
 };

package/lib/Selector/index.d.ts

@@ -40,6 +40,7 @@ export interface RefSelectorProps {
     focus: (options?: FocusOptions) => void;
     blur: () => void;
     scrollTo?: ScrollTo;
+    nativeElement: HTMLDivElement;
 }
 export interface SelectorProps {
     prefixClassName: string;
@@ -77,11 +78,6 @@ export interface SelectorProps {
     onRemove: (value: DisplayValueType) => void;
     onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onInputBlur?: () => void;
-    /**
-     * @private get real dom for trigger align.
-     * This may be removed after React provides replacement of `findDOMNode`
-     */
-    domRef: React.Ref<HTMLDivElement>;
 }
 declare const ForwardSelector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<RefSelectorProps>>;
 export default ForwardSelector;

package/lib/Selector/index.js

@@ -42,18 +42,19 @@ const Selector = (props, ref) => {
     onSearchSubmit,
     onToggleOpen,
     onInputKeyDown,
-    onInputBlur,
-    domRef
+    onInputBlur
   } = props;
 
   // ======================= Ref =======================
+  const containerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
     focus: options => {
       inputRef.current.focus(options);
     },
     blur: () => {
       inputRef.current.blur();
-    }
+    },
+    nativeElement: containerRef.current
   }));
 
   // ====================== Input ======================
@@ -179,7 +180,7 @@ const Selector = (props, ref) => {
   };
   const selectNode = mode === 'multiple' || mode === 'tags' ? /*#__PURE__*/React.createElement(_MultipleSelector.default, _extends({}, props, sharedProps)) : /*#__PURE__*/React.createElement(_SingleSelector.default, _extends({}, props, sharedProps));
   return /*#__PURE__*/React.createElement("div", {
-    ref: domRef,
+    ref: containerRef,
     className: `${prefixCls}-selector`,
     onClick: onClick,
     onMouseDown: onMouseDown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"