[BD-46] feat: escape press, backdrop click for Sheet #1217
Conversation
openedx-webhooks
added
blended
|
Thanks for the pull request, @monteri! I've created BLENDED-1199 to keep track of it in Jira. More details are on the BD-46 project page. When this pull request is ready, tag your edX technical lead. |
✅ Deploy Preview for paragon-openedx ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site settings. |
monteri
changed the title
Codecov Report
@@ Coverage Diff @@
## master #1217 +/- ##
==========================================
+ Coverage 90.77% 90.84% +0.06%
==========================================
Files 193 193
Lines 3069 3101 +32
Branches 691 699 +8
==========================================
+ Hits 2786 2817 +31
- Misses 270 271 +1
Partials 13 13
Continue to review full report at Codecov.
|
src/Sheet/index.jsx
Outdated
| componentDidMount() { | ||
| document.addEventListener('keydown', this.handleEscape); | ||
| document.addEventListener('mousedown', this.handleClickOutside); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| document.removeEventListener('keydown', this.handleEscape); | ||
| document.removeEventListener('mousedown', this.handleClickOutside); | ||
| } | ||
|
|
||
| handleEscape(e) { | ||
| if (e.key === 'Escape' && !this.props.blocking) { | ||
| this.props.onClose(); | ||
| } | ||
| } | ||
|
|
||
| handleClickOutside(e) { | ||
| if (this.wrapperRef?.current && !this.wrapperRef.current.contains(e.target) && !this.props.blocking) { | ||
| this.props.onClose(); | ||
| } | ||
| } |
There was a problem hiding this comment.
[curious] I wonder if we could use the callback functions from FocusOn here to simplify this?
There was a problem hiding this comment.
Yes, it is super good idea. Works perfect
There was a problem hiding this comment.
the only thing, I didn't manage how to test these new events, so I removed new tests
|
@monteri 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future. |
|
🎉 This PR is included in version 19.18.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Add processing of
Escapepress and backdrop clickEscapesheet is closed. New requirement - pass newonCloseprop that will be called onEscape.EscapeSheethas led to 2 actions at the same time - close on the backdrop event and open again on the button click. Changing<FocusOn enabled={this.props.blocking} />to<FocusOn />fromreact-focus-onalways put focus inside theSheetso that backdrop click can't trigger any event from outside of theSheet.JIRA: PAR-784, PAR-783