Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectPanel2: Fix bug calling onCancel #4131

Merged
merged 9 commits into from
Jan 23, 2024

Conversation

siddharthkp
Copy link
Member

@siddharthkp siddharthkp commented Jan 9, 2024

Bug: Calling onSubmit calls internalClose which calls onCancel 🐞!

This PR fixes that by separating internalClose and internalCancel

This comment was marked as resolved.

@siddharthkp siddharthkp self-assigned this Jan 9, 2024
@siddharthkp siddharthkp added patch release bug fixes, docs, housekeeping react labels Jan 9, 2024
Copy link
Contributor

github-actions bot commented Jan 9, 2024

size-limit report 📦

Path Size
dist/browser.esm.js 104.47 KB (0%)
dist/browser.umd.js 105.08 KB (0%)

@github-actions github-actions bot temporarily deployed to storybook-preview-4131 January 9, 2024 14:32 Inactive
@siddharthkp siddharthkp marked this pull request as ready for review January 12, 2024 18:46
@siddharthkp siddharthkp requested a review from a team January 12, 2024 18:46
if (typeof propsOnCancel === 'function') propsOnCancel()
}

const onInternalSubmit = (event?: React.FormEvent<HTMLFormElement>) => {
event?.preventDefault() // there is no event with selectionVariant=instant
if (propsOpen === undefined) setInternalOpen(false)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't worry, this line is part of onInternalClose

else dialogRef.current?.close()

// sync dialog open state (imperative) with internal component state
React.useEffect(() => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved these statements into an effect to avoid conflict with the subsequent lines in the component in the same render

dialog was closing and then the other lines in the component would try to access dialogRef.current which throw an error on the console :)

Comment on lines 167 to 171
React.useEffect(() => {
const dialogEl = dialogRef.current
dialogEl?.addEventListener('close', onInternalClose)
return () => dialogEl?.removeEventListener('close', onInternalClose)
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need these effects to run every render? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question! I'll double check

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: Done :)

import React from 'react'
import {ThemeProvider, ActionList} from '../../'
import {render, RenderResult} from '@testing-library/react'
import userEvent, {UserEvent} from '@testing-library/user-event'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oo UserEvent type, I've never used it before 🔥

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's really nice!

@siddharthkp siddharthkp changed the title SelectPanel2: Fix bug calling onSubmit SelectPanel2: Fix bug calling onCancel Jan 22, 2024
@siddharthkp siddharthkp added this pull request to the merge queue Jan 23, 2024
Merged via the queue into main with commit 91a899e Jan 23, 2024
30 checks passed
@siddharthkp siddharthkp deleted the drafts-selectpanel-fix-submit-bug branch January 23, 2024 08:11
@primer primer bot mentioned this pull request Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch release bug fixes, docs, housekeeping react
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants