FIX Popover toggle

silverstripe · Aug 3, 2023 · 75424ee · 75424ee
1 parent 177c9ad
commit 75424ee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/components/PopoverField/PopoverField.js b/client/src/components/PopoverField/PopoverField.js
@@ -43,7 +43,16 @@ class PopoverField extends Component {
 
     // Force setting state to the end of the execution queue to clear a potential race condition
     // with entwine click handlers
-    window.setTimeout(() => this.setState((prevState) => ({ isOpen: !prevState.isOpen }), toggleCallback), 0);
+    //
+    // eslint disable the next line which references this.state within setState()
+    // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md
+    // Following eslint guidelines this would be implemented as:
+    // window.setTimeout(() => this.setState((prevState) => ({ isOpen: !prevState.isOpen }), toggleCallback), 0);
+    // However we cannot do this because react ends up confused when we wrap inside window.setTimeout()
+    // and it calls the callback twice which causes the toggle to open and close immediately
+    // However when using this.state.isOpen things works as expected
+    // eslint-disable-next-line
+    window.setTimeout(() => this.setState({ isOpen: !this.state.isOpen }, toggleCallback), 0);
   }
 
   render() {