Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/SelectInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,8 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
blur: () => {
(inputRef.current || rootRef.current).blur?.();
},
nativeElement: rootRef.current,
// Use getDOM to handle nested nativeElement structure (e.g., when RootComponent is antd Input)
nativeElement: getDOM(rootRef.current),
Comment thread
zombieJ marked this conversation as resolved.
Outdated
};
});

Expand Down
32 changes: 32 additions & 0 deletions tests/Custom.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,36 @@ describe('Select.Custom', () => {
expect(onFocus).toHaveBeenCalled();
expect(onBlur).toHaveBeenCalled();
});

it('should handle nested nativeElement structure correctly', () => {
// Mock component that returns nativeElement structure (similar to antd Input)
const CustomInputWithNativeElement = React.forwardRef<
{ nativeElement: HTMLInputElement },
React.InputHTMLAttributes<HTMLInputElement>
>((props, ref) => {
const inputRef = React.useRef<HTMLInputElement>(null);

React.useImperativeHandle(ref, () => ({
nativeElement: inputRef.current!,
focus: () => inputRef.current?.focus(),
blur: () => inputRef.current?.blur(),
}));

return <input ref={inputRef} {...props} />;
});

const selectRef = React.createRef<any>();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better type safety and to align with the component's definition, it's recommended to use the specific ref type instead of any. You can import BaseSelectRef from ../src and type the ref accordingly.

import Select, { type BaseSelectRef } from '../src';
Suggested change
const selectRef = React.createRef<any>();
const selectRef = React.createRef<BaseSelectRef>();


render(
<Select
ref={selectRef}
getRawInputElement={() => <CustomInputWithNativeElement className="custom-input" />}
/>,
);

// The nativeElement should be a DOM element, not a nested object
const { nativeElement } = selectRef.current;
expect(nativeElement).toBeInstanceOf(HTMLInputElement);
expect(nativeElement.className).toBe('custom-input');
});
});
Loading