Fix bug with dropdowns and overlays on some browsers

Addresses arbre-app/arbre.app#1
arbre-app · Dec 2, 2021 · a6ac5a4 · a6ac5a4
1 parent cac1859
commit a6ac5a4
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/src/components/DownloadButton.js b/src/components/DownloadButton.js
@@ -32,7 +32,7 @@ function SelectionInput({ name, value, values, label, renderValue, setValue }) {
         {label}
       </Col>
       <Col xs={6} sm={7}>
-        <Dropdown as="span">
+        <Dropdown as="span" onClick={(e) => e.stopPropagation()}>
           <Dropdown.Toggle variant="light" id="dropdown-basic">
             {renderValue(values[value])}
           </Dropdown.Toggle>

diff --git a/src/components/PermalinkButton.js b/src/components/PermalinkButton.js
@@ -26,7 +26,8 @@ export function PermalinkButton({ disabled, isTabStats, ...props }) {
         </Popover>
       }
     >
-      <Button variant="info" disabled={disabled} {...props}>
+      {/* The workaround needs to be applied to the button, rather than the `OverlayTrigger` */}
+      <Button variant="info" onClick={(e) => e.stopPropagation()} disabled={disabled} {...props}>
         <PinFill className="icon" />
       </Button>
     </OverlayTrigger>

diff --git a/src/components/SettingsButton.js b/src/components/SettingsButton.js
@@ -39,7 +39,16 @@ export function SettingsButton({ ...props }) {
   const isSettingsUntouched = deepEqual(state, defaultState);
 
   return (
-    <DropdownButton variant="secondary" id="dropdown-advanced-configuration" title={<GearFill className="icon" />} as="span" show={isShown} onToggle={(isOpen, event, metadata) => setIsShown(isOpen ? true : metadata.source === 'select')} {...props}>
+    <DropdownButton
+      variant="secondary"
+      id="dropdown-advanced-configuration"
+      title={<GearFill className="icon" />}
+      as="span"
+      show={isShown}
+      onToggle={(isOpen, event, metadata) => setIsShown(isOpen ? true : metadata.source === 'select')}
+      onClick={(e) => e.stopPropagation()}
+      {...props}
+    >
       <Dropdown.Header><FormattedMessage id="settings.search" /></Dropdown.Header>
       <Dropdown.Item onClick={() => setMatchesHighlightingDispatch(!matchesHighlighting)}>
         <CheckboxIcon isEnabled={matchesHighlighting} />

diff --git a/src/form/ResultsPerPageSelect.js b/src/form/ResultsPerPageSelect.js
@@ -9,7 +9,7 @@ export function ResultsPerPageSelect({ values, disabled, ...props }) {
   const setCurrentPageDispatch = currentPage => dispatchForm(setResultsPerPage(currentPage));
   const value = form.resultsPerPage;
   return (
-    <Dropdown className="results-per-page-select" {...props}>
+    <Dropdown className="results-per-page-select" onClick={(e) => e.stopPropagation()} {...props}>
       <Dropdown.Toggle variant="light" id="dropdown-basic" disabled={disabled}>
         {value}
       </Dropdown.Toggle>

diff --git a/src/form/SearchPlaceInput.js b/src/form/SearchPlaceInput.js
@@ -75,7 +75,7 @@ function SearchPlaceField({ value, onChange, disabled }) {
   }, [open]);
 
   return (
-    <Dropdown onToggle={handleToggle}>
+    <Dropdown onToggle={handleToggle} onClick={(e) => e.stopPropagation()}> {/* See https://github.com/react-bootstrap/react-bootstrap/issues/5409 */}
       <Dropdown.Toggle variant="light" disabled={disabled} id="place-dropdown" className="text-left btn-block text-nowrap overflow-hidden">
         {value.length > 0 ? value[0].fullname : (
           <FormattedMessage id="form.place" />