New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
V5 Offcanvas - Option to disable auto hide when offcanvas loses focus. #33491
Comments
If I understand what's being proposed, would this allow the offcanvas to be used more as a drawer in the user interface? The Material UI guidelines have drawer as a component that can be on-screen all the time: https://material.io/components/navigation-drawer#standard-drawer |
Yes, that is precisely what I am suggesting. |
It is a valid feature. |
please give is a feedback if you still need this attitude, after version 5 release. Given the final backdrop utility, the offcanvas, closes only if we have a backdrop enabled. Are you ok with this behavior? |
Hi, @GeoSot 🙂 I created the PR at that time when the issue could be reproduced. Although now the behavior has been changed, you should keep the ability to close the offcanvas by clicking outside it and keep it configurable. And it is just my opinion you guys are the maintainer it is definitely your call to make the proper decision. |
I would say that the new behavior is what would be desirable and is an acceptable alternative to what I suggested. |
Currently in v5.0.0-beta 3:
Offcanvas will autohide when it loses focus. IE you click anywhere other than the offcanvas area.
What I'm suggesting:
Add data-bs-autohide boolean value to config options for Offcanvas.
Default for data-bs-autohide is true; to maintain existing compatibility.
Disable event registration for EVENT_CLICK_DISMISS when data-bs-autohide is set to false.
Alternatively, to allow changing of this property via the data attribute, allow the event to still be registered, but change the event handler to respect the autohide property.
Examples of the modifications required to implement change follow.
`
const Default = {
backdrop: true,
keyboard: true,
scroll: false,
autohide: true
}
const DefaultType = {
backdrop: 'boolean',
keyboard: 'boolean',
scroll: 'boolean',
autohide: 'boolean'
}
`
if (!this._config.autohide) { EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide()) }
The text was updated successfully, but these errors were encountered: