Merge pull request #24965 from overleaf/td-downshift-9-upgrade

Upgrade Downshift to version 9

GitOrigin-RevId: b36904ab0c82c09a633a25cd6fed651d7c8b19f7

services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx

@@ -24,10 +24,8 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     getItemProps,
     highlightedIndex,
-    openMenu,
     selectedItem,
   } = useCombobox({
     inputValue,
@@ -50,7 +48,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
 
   return (
     <div className={classnames('dropdown', 'd-block')}>
-      <div {...getComboboxProps()}>
+      <div>
         {/* eslint-disable-next-line jsx-a11y/label-has-for */}
         <label {...getLabelProps()} className="visually-hidden">
           {t('country')}
@@ -60,11 +58,6 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
             onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
               setInputValue(event.target.value)
             },
-            onFocus: () => {
-              if (!isOpen) {
-                openMenu()
-              }
-            },
             ref: inputRef,
           })}
           placeholder={t('country')}

services/web/frontend/js/features/settings/components/emails/downshift-input.tsx

@@ -47,10 +47,8 @@ function Downshift({
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     getItemProps,
     highlightedIndex,
-    openMenu,
     selectedItem,
   } = useCombobox({
     inputValue,
@@ -82,8 +80,7 @@ function Downshift({
 
   return (
     <div className={classnames('dropdown', 'd-block')}>
-      <div {...getComboboxProps()}>
-        {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+      <div>
         <OLFormLabel
           {...getLabelProps()}
           className={showLabel ? '' : 'visually-hidden'}
@@ -95,11 +92,6 @@ function Downshift({
             onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
               setValue(event.target.value)
             },
-            onFocus: () => {
-              if (!isOpen) {
-                openMenu()
-              }
-            },
             ref: inputRef,
           })}
           placeholder={placeholder}