chore: fix input logic

Author: zombieJ

assets/patch.less

@@ -69,7 +69,7 @@
 
   // ============================ Multiple ============================
   &-multiple {
-    .@{select-prefix}-item {
+    .@{select-prefix}-selection-item {
       background: rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       margin-right: 4px;

src/BaseSelect/index.tsx

@@ -29,6 +29,7 @@ import { useEvent } from '@rc-component/util';
 import type { SelectInputRef } from '../SelectInput';
 import SelectInput from '../SelectInput';
 import type { ComponentsConfig } from '../hooks/useComponents';
+import useComponents from '../hooks/useComponents';
 export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
 
 /**
@@ -313,7 +314,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     onMouseDown,
 
     // Components
-    components = {},
+    components,
 
     // Rest Props
     ...restProps
@@ -366,6 +367,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       selectorRef.current?.nativeElement,
   }));
 
+  // =========================== Components ===========================
+  const mergedComponents = useComponents(components, getInputElement, getRawInputElement);
+
   // ========================== Search Value ==========================
   const mergedSearchValue = React.useMemo(() => {
     if (mode !== 'combobox') {
@@ -927,7 +931,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       // Open
       onMouseDown={onInternalMouseDown}
       // Components
-      components={components}
+      components={mergedComponents}
     />
   );
 

src/SelectInput/Input.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useSelectInputContext } from './context';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useBaseProps from '../hooks/useBaseProps';
+import { composeRef } from '@rc-component/util/lib/ref';
 
 export interface InputProps {
   id?: string;
@@ -151,41 +152,68 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   }, [syncWidth, value]);
 
   // ============================= Render =============================
-  return (
-    <InputComponent
-      id={id}
-      type={mode === 'combobox' ? 'text' : 'search'}
-      {...restProps}
-      ref={inputRef}
-      style={
-        {
-          ...styles?.input,
-          ...style,
-          '--select-input-width': widthCssVar,
-        } as React.CSSProperties
+  // Extract shared input props
+  const sharedInputProps = {
+    id,
+    type: mode === 'combobox' ? 'text' : 'search',
+    ...restProps,
+    ref: inputRef as React.Ref<HTMLInputElement>,
+    style: {
+      ...styles?.input,
+      ...style,
+      '--select-input-width': widthCssVar,
+    } as React.CSSProperties,
+    autoFocus,
+    autoComplete: autoComplete || 'off',
+    className: inputCls,
+    disabled,
+    value: value || '',
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    onPaste: handlePaste,
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd,
+    // Accessibility attributes
+    role: role || 'combobox',
+    'aria-expanded': open || false,
+    'aria-haspopup': 'listbox' as const,
+    'aria-owns': `${id}_list`,
+    'aria-autocomplete': 'list' as const,
+    'aria-controls': `${id}_list`,
+    'aria-activedescendant': open ? activeDescendantId : undefined,
+  };
+
+  // Handle different InputComponent types
+  if (React.isValidElement(InputComponent)) {
+    // If InputComponent is a ReactElement, use cloneElement with merged props
+    const existingProps: any = InputComponent.props || {};
+
+    // Start with shared props as base
+    const mergedProps = { ...sharedInputProps, ...existingProps };
+
+    // Batch update function calls
+    Object.keys(existingProps).forEach((key) => {
+      const existingValue = (existingProps as any)[key];
+
+      if (typeof existingValue === 'function') {
+        // Merge event handlers
+        (mergedProps as any)[key] = (...args: any[]) => {
+          existingValue(...args);
+          (sharedInputProps as any)[key]?.(...args);
+        };
       }
-      autoFocus={autoFocus}
-      autoComplete={autoComplete || 'off'}
-      className={inputCls}
-      disabled={disabled}
-      value={value || ''}
-      onChange={handleChange}
-      onKeyDown={handleKeyDown}
-      onBlur={handleBlur}
-      onPaste={handlePaste}
-      onCompositionStart={handleCompositionStart}
-      onCompositionEnd={handleCompositionEnd}
-      // Accessibility attributes
-      role={role || 'combobox'}
-      aria-expanded={open || false}
-      aria-haspopup="listbox"
-      aria-owns={`${id}_list`}
-      aria-autocomplete="list"
-      aria-controls={`${id}_list`}
-      aria-activedescendant={open ? activeDescendantId : undefined}
-      // onMouseDown={onMouseDown}
-    />
-  );
+    });
+
+    // Update ref
+    mergedProps.ref = composeRef((InputComponent as any).ref, sharedInputProps.ref);
+
+    return React.cloneElement(InputComponent, mergedProps);
+  }
+
+  // If InputComponent is a component type, render normally
+  const Component = InputComponent as React.ComponentType<any>;
+  return <Component {...sharedInputProps} />;
 });
 
 export default Input;

src/hooks/useComponents.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import type { SelectInputRef, SelectInputProps } from '../SelectInput';
+import type { BaseSelectProps } from '../BaseSelect';
 
 export interface ComponentsConfig {
   root?: React.ComponentType<any> | string | React.ReactElement;
-  input?: React.ComponentType<any> | string;
+  input?: React.ComponentType<any> | string | React.ReactElement;
 }
 
 export interface FilledComponentsConfig {
@@ -15,10 +16,27 @@ export interface FilledComponentsConfig {
   >;
 }
 
-export default function useComponents(components?: ComponentsConfig) {
+export default function useComponents(
+  components?: ComponentsConfig,
+  getInputElement?: BaseSelectProps['getInputElement'],
+  getRawInputElement?: BaseSelectProps['getRawInputElement'],
+): ComponentsConfig {
   return React.useMemo(() => {
-    const { root: RootComponent, input: InputComponent } = components || {};
+    let { root, input } = components || {};
 
-    return { root: RootComponent, input: InputComponent } as FilledComponentsConfig;
-  }, [components]);
+    // root: getRawInputElement
+    if (getRawInputElement) {
+      root = getRawInputElement();
+    }
+
+    // input: getInputElement
+    if (getInputElement) {
+      input = getInputElement();
+    }
+
+    return {
+      root,
+      input,
+    };
+  }, [components, getInputElement, getRawInputElement]);
 }

tests/Select.test.tsx

@@ -456,7 +456,7 @@ describe('Select.Basic', () => {
       </Select>,
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.querySelector('input')).toHaveAttribute('readonly');
   });
 
   it('should contain falsy children', () => {
@@ -2256,15 +2256,15 @@ describe('Select.Basic', () => {
         />,
       );
 
-      expect(container.querySelectorAll('span.rc-select-item')[0].getAttribute('title')).toEqual(
-        'TitleBamboo',
-      );
-      expect(container.querySelectorAll('span.rc-select-item')[1].getAttribute('title')).toEqual(
-        'little',
-      );
-      expect(container.querySelectorAll('span.rc-select-item')[2].getAttribute('title')).toEqual(
-        '+ 1 ...',
-      );
+      expect(
+        container.querySelectorAll('span.rc-select-selection-item')[0].getAttribute('title'),
+      ).toEqual('TitleBamboo');
+      expect(
+        container.querySelectorAll('span.rc-select-selection-item')[1].getAttribute('title'),
+      ).toEqual('little');
+      expect(
+        container.querySelectorAll('span.rc-select-selection-item')[2].getAttribute('title'),
+      ).toEqual('+ 1 ...');
     });
   });
 
@@ -2424,7 +2424,6 @@ describe('Select.Basic', () => {
       const ref = React.useRef<HTMLInputElement>(null);
       const onSelect = () => {
         ref.current!.blur();
-        fireEvent.blur(ref.current);
       };
       const getInputElement = () => {
         return <input ref={ref} onBlur={onBlur} />;

tests/__snapshots__/Select.test.tsx.snap

@@ -106,28 +106,6 @@ exports[`Select.Basic filterOption could be true as described in default value 1
 </div>
 `;
 
-exports[`Select.Basic no search 1`] = `
-<div
-  class="rc-select rc-select-single"
->
-  <div
-    class="rc-select-content"
-  >
-    <div
-      class="rc-select-content-value"
-      style="visibility: visible;"
-    >
-      1
-    </div>
-    <input
-      class="rc-select-input"
-      readonly=""
-      value=""
-    />
-  </div>
-</div>
-`;
-
 exports[`Select.Basic render renders aria-attributes correctly 1`] = `
 <div
   aria-label="some-label"
@@ -183,8 +161,15 @@ exports[`Select.Basic render renders correctly 1`] = `
       2
     </div>
     <input
+      aria-autocomplete="list"
+      aria-controls="test-id_list"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="test-id_list"
+      autocomplete="off"
       class="antd-input"
       id="test-id"
+      role="combobox"
       type="search"
       value=""
     />
@@ -250,8 +235,16 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
       2
     </div>
     <input
+      aria-autocomplete="list"
+      aria-controls="test-id_list"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-owns="test-id_list"
+      autocomplete="off"
       class="antd-input"
+      disabled=""
       id="test-id"
+      role="combobox"
       type="search"
       value=""
     />