arunsarin85 commented on code in PR #9865:
URL: https://github.com/apache/ozone/pull/9865#discussion_r2971993599
##########
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(
Review Comment:
Addressed the comment , please check .
By mistake did a force push , so history is not maintained please check
##########
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:
Addressed the comment , please check .
By mistake did a force push , so history is not maintained please check
--
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]
