Avoid text boxes in partially open drawer

Author: wbazant

src/components/entry/overview/ReportButton.js

@@ -5,18 +5,27 @@ import { useSelector } from 'react-redux'
 
 import { ReportModal } from '../../form/ReportModal'
 import Button from '../../ui/Button'
+import useLocationPane from '../useLocationPane'
 
 export const ReportButton = () => {
   const { location: locationData } = useSelector((state) => state.location)
   const { t } = useTranslation()
   const typesAccess = useSelector((state) => state.type.typesAccess)
+  const { drawerFullyOpen, fullyOpenPaneDrawer } = useLocationPane()
 
   const locationName = locationData?.type_ids
     .map((id) => typesAccess?.getType(id)?.commonName)
     .filter(Boolean)
     .join(', ')
   const [isReportModalOpen, setIsReportModalOpen] = useState(false)
 
+  const handleReportClick = () => {
+    if (!drawerFullyOpen) {
+      fullyOpenPaneDrawer()
+    }
+    setIsReportModalOpen(true)
+  }
+
   return (
     <>
       {isReportModalOpen && (
@@ -27,11 +36,7 @@ export const ReportButton = () => {
           onDismiss={() => setIsReportModalOpen(false)}
         />
       )}
-      <Button
-        leftIcon={<Flag />}
-        secondary
-        onClick={() => setIsReportModalOpen(true)}
-      >
+      <Button leftIcon={<Flag />} secondary onClick={handleReportClick}>
         {t('form.button.report')}
       </Button>
     </>

src/components/entry/overview/SaveToListButton.js

@@ -15,6 +15,7 @@ import {
 import Button from '../../ui/Button'
 import { theme } from '../../ui/GlobalStyle'
 import Input from '../../ui/Input'
+import useLocationPane from '../useLocationPane'
 import useSavedLists from './useSavedLists'
 
 const SkeletonItemRow = styled.div`
@@ -170,6 +171,7 @@ const SaveToListButton = ({ containerRef }) => {
   const addingNewSkeletonRef = useRef(null)
 
   const { lists } = useSavedLists(locationId)
+  const { drawerFullyOpen, fullyOpenPaneDrawer } = useLocationPane()
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -212,6 +214,9 @@ const SaveToListButton = ({ containerRef }) => {
   }, [isAddingNew])
 
   const handleButtonClick = () => {
+    if (!drawerFullyOpen) {
+      fullyOpenPaneDrawer()
+    }
     if (!open) {
       dispatch(fetchLists())
     }