diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
index 2a328dd2bb..62c94e7932 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
@@ -297,13 +297,6 @@ function ListView({
startActions={
<>
{isSearchable && (
- //
{
const wrapperRef = useRef(null);
const iconButtonRef = useRef(null);
- const isMountedRef = useRef(false);
- const [didSearch, setDidSearch] = useState(false);
- const [isOpen, setIsOpen] = useState(false);
const [{ query }, setQuery] = useQueryParams();
const [value, setValue] = useState(query?._q || '');
+ const [isOpen, setIsOpen] = useState(!!value);
const { formatMessage } = useIntl();
const { trackUsage } = useTracking();
const handleToggle = () => setIsOpen(prev => !prev);
- useEffect(() => {
- if (isMountedRef.current) {
- if (isOpen) {
+ useLayoutEffect(() => {
+ if (isOpen) {
+ setTimeout(() => {
wrapperRef.current.querySelector('input').focus();
- }
+ }, 0);
}
-
- isMountedRef.current = true;
}, [isOpen]);
- useEffect(() => {
- if (value && !isOpen) {
- handleToggle();
- }
- }, [value, isOpen]);
-
const handleClear = () => {
- setDidSearch(false);
setValue('');
setQuery({ _q: '' }, 'remove');
};
@@ -46,14 +35,16 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
const handleSubmit = e => {
e.preventDefault();
- setQuery({ _q: value, page: 1 });
- };
-
- useEffect(() => {
- if (didSearch && trackedEvent) {
- trackUsage(trackedEvent);
+ if (value) {
+ if (trackedEvent) {
+ trackUsage(trackedEvent);
+ }
+ setQuery({ _q: value, page: 1 });
+ } else {
+ handleToggle();
+ setQuery({ _q: '' }, 'remove');
}
- }, [didSearch, trackedEvent, trackUsage]);
+ };
if (isOpen) {
return (
@@ -61,10 +52,7 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
{
- setDidSearch(true);
- setValue(value);
- }}
+ onChange={({ target: { value } }) => setValue(value)}
value={value}
clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
onClear={handleClear}