spacemonkd commented on code in PR #9865:
URL: https://github.com/apache/ozone/pull/9865#discussion_r2956055156
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##########
@@ -98,27 +147,162 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
{isDisabled
? placeholder
: `${placeholder}: ${selected.length} selected`
-}
+ }
</components.ValueContainer>
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // ── Custom Input override (search mode only) ─────────────────────────────
+ // React-select v3's onInputBlur steals focus back to its hidden input
whenever
+ // a child element gains focus. By intercepting onBlur here we suppress that
+ // call while the search box is active, preventing the dropdown from closing.
+ const InputComponent = React.useMemo(
+ () => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+ // While the user is interacting with the search box, skip
react-select's
+ // onInputBlur so it does not steal focus back or close the menu.
+ if (searchInteracting.current) return;
+ if (onBlur) onBlur(e);
+ };
+ return <components.Input {...inputProps} onBlur={handleBlur} />;
+ }) as React.FC<any>,
+ [] // searchInteracting captured by ref — always current
+ );
- return (
+ // ── Stable MenuList ───────────────────────────────────────────────────────
+ // Created once so react-select updates (not remounts) it on every render.
+ // All mutable values are read from stateRef.current at call time.
+ const MenuListComponent = React.useMemo(
Review Comment:
Can we extract this to it's own component and avoid using memoization?
Usually useMemo is an expensive operation, this is a relatively lightweight
component, hence re-render is fine.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
