Observe Combobox trigger for resize#1333
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| // Measure the width of the button to inform the width of the menu (below). | ||
| let [buttonWidth, setButtonWidth] = useState(null); | ||
| let {scale} = useProvider(); | ||
| useLayoutEffect(() => { |
There was a problem hiding this comment.
Does resize observer always get called on the initial render? I think at least when not supported it wouldn't based on my reading of the code.
There was a problem hiding this comment.
O good point, forgot about the unsupported case. Otherwise yes, it seems to be called on the initial render https://drafts.csswg.org/resize-observer/#ref-for-element%E2%91%A3
ResizeObserver’s notifications can be used to respond to changes in Element's size. Some interesting facts about these observations:
Observation will fire when watched Element is inserted/removed from DOM.
Observation will fire when watched Element display gets set to none.
Observations do not fire for non-replaced inline Elements.
Observations will not be triggered by CSS transforms.
Observation will fire when observation starts if Element is being rendered, and Element’s size is not 0,0.
There was a problem hiding this comment.
It might be better to implement that in useResizeObserver's fallback case. Trigger a "resize" event on mount? Ah, but then scale changes...
|
Build successful! 🎉 |
| useLayoutEffect(() => { | ||
| let buttonWidth = buttonRef.current.UNSAFE_getDOMNode().offsetWidth; | ||
| let buttonWidth = unwrappedButtonRef.current.offsetWidth; | ||
| let inputWidth = inputRef.current.offsetWidth; | ||
| setMenuWidth(buttonWidth + inputWidth); | ||
| }, [scale, buttonRef, inputRef]); | ||
| }, [scale, unwrappedButtonRef, inputRef]); |
There was a problem hiding this comment.
Would this work?
useLayoutEffect(onResize, [scale, onResize])
|
Build successful! 🎉 |
|
Build successful! 🎉 |
ktabors
left a comment
ktabors
left a comment
There was a problem hiding this comment.
Should there be ComboBox and Picker resize tests? And should they resize multiple times?
|
doing resize tests is quite difficult, there are two ways to do it:
We have very few of these tests because they are so hard and brittle, as such I opted to leave them out of this one, the behavior is fairly easy to observer in the stories. |
4 participants
combobox menu should remeasure whenever the combobox input/button change size
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: