Skip to content

SelectPanel2: Fix bug calling onCancel - #4131

Merged
siddharthkp merged 9 commits into
mainfrom
drafts-selectpanel-fix-submit-bug
Jan 23, 2024
Merged

SelectPanel2: Fix bug calling onCancel#4131
siddharthkp merged 9 commits into
mainfrom
drafts-selectpanel-fix-submit-bug

Conversation

@siddharthkp

@siddharthkpsiddharthkp commented Jan 9, 2024

Copy link
Copy Markdown
Member

Bug: Calling onSubmit calls internalClose which calls onCancel 🐞!

This PR fixes that by separating internalClose and internalCancel

@changeset-bot

This comment was marked as resolved.

@siddharthkpsiddharthkp self-assigned this Jan 9, 2024
@siddharthkpsiddharthkp added patch release bug fixes, docs, housekeeping react labels Jan 9, 2024
@github-actions

github-actionsBot commented Jan 9, 2024

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js104.47 KB (0%)
dist/browser.umd.js105.08 KB (0%)

@github-actions
github-actionsBottemporarily 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 teamJanuary 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
Copy Markdown
MemberAuthor

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
Copy Markdown
MemberAuthor

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
Copy Markdown
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
Copy Markdown
MemberAuthor

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
Copy Markdown
MemberAuthor

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
Copy Markdown
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
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

It's really nice!

@siddharthkpsiddharthkp changed the title SelectPanel2: Fix bug calling onSubmitSelectPanel2: Fix bug calling onCancelJan 22, 2024
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4131 January 22, 2024 18:22 Inactive
@siddharthkp
siddharthkp added this pull request to the merge queueJan 23, 2024
Merged via the queue into main with commit 91a899eJan 23, 2024
@siddharthkp
siddharthkp deleted the drafts-selectpanel-fix-submit-bug branch January 23, 2024 08:11
@primerprimerBot mentioned this pull request Jan 23, 2024
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

patch releasebug fixes, docs, housekeepingreact

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@siddharthkp@broccolinisoup@mperrotti