Skip to content

Commit

Permalink
fix(inspector): queue inspector focus in a microtask to prevent flush…
Browse files Browse the repository at this point in the history
…Sync (#6358)

**Problem:**
Today triggering a dropdown from the inspector causes a `flushSync`
error

<video
src="https://github.com/user-attachments/assets/110f6556-689c-45de-ae64-414850e707c3"></video>

**Fix:**
Queue the `dispatch` in the inspector focus in a microtask to prevent
this React error

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
  • Loading branch information
liady authored Sep 12, 2024
1 parent 22bd073 commit 42942aa
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion editor/src/components/inspector/inspector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,9 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
const onFocus = React.useCallback(
(event: React.FocusEvent<HTMLElement>) => {
if (focusedPanel !== 'inspector') {
dispatch([setFocus('inspector')], 'inspector')
queueMicrotask(() => {
dispatch([setFocus('inspector')], 'inspector')
})
}
},
[dispatch, focusedPanel],
Expand Down

0 comments on commit 42942aa

Please sign in to comment.