chore: backfill

Author: zombieJ

src/BaseSelect/index.tsx

@@ -474,6 +474,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       });
     }
 
+    // Open if from typing
+    if (searchText && fromTyping) {
+      triggerOpen(true);
+    }
+
     return ret;
   };
 
@@ -923,6 +928,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       displayValues={displayValues}
       placeholder={placeholder}
       searchValue={mergedSearchValue}
+      activeValue={activeValue}
       onSearch={onInternalSearch}
       onSearchSubmit={onInternalSearchSubmit}
       onInputBlur={onInputBlur}

src/SelectInput/Content/Placeholder.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { useSelectInputContext } from '../context';
 
-export default function Placeholder() {
+export interface PlaceholderProps {
+  hasSearchValue?: boolean;
+}
+
+export default function Placeholder(props: PlaceholderProps) {
   const { prefixCls, placeholder, displayValues } = useSelectInputContext();
 
   const { searchValue } = useSelectInputContext();
 
+  const { hasSearchValue = !!searchValue } = props;
+
   if (displayValues.length) {
     return null;
   }
@@ -14,7 +20,7 @@ export default function Placeholder() {
     <div
       className={`${prefixCls}-placeholder`}
       style={{
-        visibility: searchValue ? 'hidden' : 'visible',
+        visibility: hasSearchValue ? 'hidden' : 'visible',
       }}
     >
       {placeholder}

src/SelectInput/Content/SingleContent.tsx

@@ -8,29 +8,49 @@ export default React.forwardRef<HTMLInputElement, SharedContentProps>(function S
   { inputProps },
   ref,
 ) {
-  const { prefixCls, searchValue, displayValues, maxLength, mode } = useSelectInputContext();
+  const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode, onSearch } =
+    useSelectInputContext();
 
+  const [inputChanged, setInputChanged] = React.useState(false);
+
+  const combobox = mode === 'combobox';
   const displayValue = displayValues[0];
 
+  // Implement the same logic as the old SingleSelector
+  let mergedSearchValue: string = searchValue || '';
+  if (combobox && activeValue && !inputChanged) {
+    mergedSearchValue = activeValue;
+  }
+
+  React.useEffect(() => {
+    if (combobox) {
+      setInputChanged(false);
+    }
+  }, [combobox, activeValue]);
+
   return (
     <div className={`${prefixCls}-content`}>
       {displayValue ? (
         <div
           className={`${prefixCls}-content-value`}
           style={{
-            visibility: searchValue ? 'hidden' : 'visible',
+            visibility: mergedSearchValue ? 'hidden' : 'visible',
           }}
         >
           {displayValue.label}
         </div>
       ) : (
-        <Placeholder />
+        <Placeholder hasSearchValue={!!mergedSearchValue} />
       )}
       <Input
         ref={ref}
         {...inputProps}
-        value={searchValue}
+        value={mergedSearchValue}
         maxLength={mode === 'combobox' ? maxLength : undefined}
+        onChange={(e) => {
+          setInputChanged(true);
+          inputProps.onChange?.(e);
+        }}
       />
     </div>
   );

src/SelectInput/Input.tsx

@@ -13,12 +13,11 @@ export interface InputProps {
   className?: string;
   style?: React.CSSProperties;
   maxLength?: number;
-  [key: string]: any;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { onChange, onKeyDown, onBlur, ...restProps } = props;
-  const { prefixCls, mode, onSearch, onSearchSubmit, onInputBlur, onInputKeyDown, autoFocus } =
+  const { prefixCls, mode, onSearch, onSearchSubmit, onInputBlur, autoFocus } =
     useSelectInputContext();
 
   const inputCls = `${prefixCls}-input`;
@@ -44,12 +43,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     const { key } = event;
     const { value } = event.currentTarget;
 
-    // Call the internal keyboard handler from context first
-    // This handles up/down arrow prevention and validate open keys
-    if (onInputKeyDown) {
-      onInputKeyDown(event);
-    }
-
     // Handle Enter key submission - referencing Selector implementation
     if (key === 'Enter' && mode === 'tags' && !compositionStatusRef.current && onSearchSubmit) {
       onSearchSubmit(value);

src/SelectInput/index.tsx

@@ -20,6 +20,7 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   displayValues: DisplayValueType[];
   placeholder?: React.ReactNode;
   searchValue?: string;
+  activeValue?: string;
   mode?: Mode;
   onSearch?: (searchText: string, fromTyping: boolean, isCompositing: boolean) => void;
   onSearchSubmit?: (searchText: string) => void;

tests/Combobox.test.tsx

@@ -319,7 +319,7 @@ describe('Select.Combobox', () => {
       onChange.mockReset();
 
       keyDown(inputEle, KeyCode.DOWN);
-      expect(inputEle.value).toEqual('light@gmail.com');
+      expect(inputEle).toHaveValue('light@gmail.com');
       expect(onChange).not.toHaveBeenCalled();
 
       keyDown(inputEle, KeyCode.ENTER);