fix(date-inputs): header focus problem fix #1160
Conversation
| const handleBlur = React.useCallback( | ||
| event => { | ||
| if ( | ||
| event.relatedTarget && |
There was a problem hiding this comment.
What would you suggest?
"Don't call onBlur if the related target is a calendar-header button" feels a bit ... redundant?
There was a problem hiding this comment.
Something like "A click can occur inside the calendars header. This is when blurring should not be triggered as otherwise the header looses focus."
There was a problem hiding this comment.
yeah I'm removing this work around
| expect(onFocus).toHaveBeenCalledTimes(1); | ||
| expect(getByText('September')).toBeInTheDocument(); | ||
| const previousMonthButton = getByLabelText('show prev month'); | ||
| userEvent.click(previousMonthButton); |
There was a problem hiding this comment.
Would you suggest using this in the MC too or apply it everywhere in UIKit?
There was a problem hiding this comment.
@tdeekens yes. Now that I realize that fireEvent.click doesn't actually ... click, I think it's the worst and should be deleted.
There was a problem hiding this comment.
nevermind, jest-dom is just unusable. If we want to test this, we should use Puppeteer and Chrome headless.
|
Unfortunately, it's not possible to test this with jest-dom |
| if ( | ||
| event.relatedTarget && | ||
| event.relatedTarget.getAttribute('data-button-type') === | ||
| 'rich-text-button' |
There was a problem hiding this comment.
none of this stuff is necessary
| @@ -17,8 +17,16 @@ const WrapperComponent = styled.div` | |||
|
|
|||
| const CalendarHeader = props => { | |||
| const intl = useIntl(); | |||
| // https://codepen.io/mudassir0909/pen/eIHqB | |||
There was a problem hiding this comment.
it's crazy how just learning basic vanilla JS + html can help
| await prevMonthButton.click(); | ||
|
|
||
| await wait(() => getByText(doc, 'October')); | ||
| // our input should still be focused even though we clicked a header button |
There was a problem hiding this comment.
here is the updated test
montezume
force-pushed
the
ml-date-input-fix
branch
from
5322a00 to
d9d4d61
Compare
|
|
||
| // we prevent all our defined onClicks inside of the CalendarHeader | ||
| // from blurring our input. | ||
| const onMouseDown = React.useCallback(event => { |
montezume
force-pushed
the
ml-date-input-fix
branch
from
fb64c1a to
5d0e466
Compare
montezume
force-pushed
the
ml-date-input-fix
branch
from
5d0e466 to
c830ccf
Compare
Summary
Fixes #1159
This is very similar to how we deal with buttons inside of our
RichTextInput's Toolbar. 😇