feat(drawer): add closedby="any" to prevent backdrop drag-close#5959
feat(drawer): add closedby="any" to prevent backdrop drag-close#5959
closedby="any" to prevent backdrop drag-close#5959Conversation
github-project-automation
bot
moved this to 🏗 In progress
in UX Engineering Team Backlog
|
This prevents unwanted drawer closing when a mouse down event starts inside the drawer and the mouse up event occurs outside the drawer (on the backdrop). The closedby attribute is conditionally applied only when the dialog is opened via showModal() (not for position="absolute", backdrop="none", or variant="inside" configurations). Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
|
@copilot I'm sorry, it wasn't about |
…ction - Changed closedby attribute from "closerequest" to "any" - Added feature detection for closedBy in HTMLDialogElement.prototype - Only call .close() when browser doesn't support closedBy or dialog is not modal Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
Done in d9f96b7. Changed
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
mfranzke
changed the title
closedby="any"` to prevent backdrop drag-close
mfranzke
changed the title
closedby="any"` to prevent backdrop drag-closeclosedby="any" to prevent backdrop drag-close
| props.position === 'absolute' || | ||
| props.backdrop === 'none' || | ||
| props.variant === 'inside' |
There was a problem hiding this comment.
Move this into a state function (e.g. state.isClosable) to reuse it for closedby attribute
There was a problem hiding this comment.
Move this into a state function (e.g.
state.isClosable) to reuse it forclosedbyattribute
@copilot please take that comment #5959 (comment) into account and implement it for this condition within the whole file.
There was a problem hiding this comment.
Done in 85809a1. Extracted the modal detection condition into state.isNotModal() function and reused it in three places:
handleDialogOpen()forshow()vsshowModal()handleDialogOpen()for browser capability detection around.close()- JSX
closedbyattribute
|
Can you add a "Test" into the showcases to cover the issue? An automatic one will not work but you can add it to those files: showcases/react-showcase/src/components/form/index.tsx |
We could actually integrate it via graceful degradation to our existing JavaScript code, and nobody would get hurt, but a lot of users would benefit from this (and other features). |
Move the modal detection condition into a state function `isNotModal()` to reduce code duplication. The function is now used for: - Determining show() vs showModal() - Browser capability detection around .close() - The closedby attribute Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
closedby="any"HTML attribute on dialog elements opened via.showModal()closedby="any"attribute to dialog element when opened via.showModal().close()when browser doesn't supportclosedByor when dialog is not a modalisNotModal()state function for reuse across the component💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.