feat(NestedSelect): Rerender BottomSheet if content change

cozy · Oct 18, 2023 · b26e6bd · b26e6bd
1 parent c93efb2
commit b26e6bd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/react/NestedSelect/BottomSheet.jsx b/react/NestedSelect/BottomSheet.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import cx from 'classnames'
 
 import Icon from '../Icon'
@@ -31,10 +31,16 @@ const HeaderComponent = ({ title, showBack, onClickBack }) => {
 }
 
 const SelfBottomSheet = props => {
+  const [, setInnerContentHeight] = useState(0) // tricks to rerender BottomSheet
+
   return (
     <BottomSheet backdrop onClose={props.onClose}>
       <BottomSheetItem disableGutters>
-        <NestedSelect HeaderComponent={HeaderComponent} {...props} />
+        <NestedSelect
+          HeaderComponent={HeaderComponent}
+          setInnerContentHeight={setInnerContentHeight}
+          {...props}
+        />
       </BottomSheetItem>
     </BottomSheet>
   )

diff --git a/react/NestedSelect/NestedSelect.jsx b/react/NestedSelect/NestedSelect.jsx
@@ -18,6 +18,7 @@ export { ItemRow }
 class NestedSelect extends Component {
   constructor(props) {
     super(props)
+    this.innerRef = React.createRef()
     this.state = {
       history: [props.options],
       searchValue: '',
@@ -29,6 +30,12 @@ class NestedSelect extends Component {
     this.unmounted = true
   }
 
+  componentDidUpdate() {
+    const { setInnerContentHeight } = this.props
+
+    setInnerContentHeight?.(this.innerRef?.current?.offsetHeight)
+  }
+
   resetHistory() {
     if (this.unmounted) {
       return
@@ -105,7 +112,7 @@ class NestedSelect extends Component {
     }
 
     return (
-      <>
+      <span ref={this.innerRef}>
         {HeaderComponent ? (
           <HeaderComponent
             title={current.title || title}
@@ -171,7 +178,7 @@ class NestedSelect extends Component {
             ))
           )}
         </ContentComponent>
-      </>
+      </span>
     )
   }
 }