Skip to content

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

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
@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.

4 participants