Skip to content
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

Add focusOnShow property to Dialog #988

Closed
RikSlendebroek opened this issue Aug 14, 2019 · 0 comments

Comments

@RikSlendebroek
Copy link

commented Aug 14, 2019

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ X ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://codesandbox.io/s/primereact-domt6?fontsize=14

note: this is the same as the code on the dialog example found on the primereact site, but it does focus on a different button

Current behavior

When opening a dialog it will focus the first button it can find (found in the code, tested with disabling). On the site and in the codepen it's fine since it will focus a maximize button or the yes button. However, it focusses the close button in our application. This means when the user presses enter after opening the dialog it closes.

Expected behavior

When opening the dialog it should not autofocus a button.

Minimal reproduction of the problem with instructions

focus() {
let focusable = DomHandler.findSingle(this.container, 'button');
if (focusable) {
focusable.focus();
}
}
show() {
this.bindGlobalListeners();
if (this.props.onShow) {
this.props.onShow();
}
this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
this.focus();
if (this.props.modal) {
this.enableModality();
}
if (this.state.maximized) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
}

I found the code where it sets the focus. but seems deliberate. If it could be made as an opt out would already work. Or explanation seems a bit random to focus on the first button you can find.

Removing line 105 seems to fix it for me, but it is also the only reference to the focus function written above, that's why it seems deliberate.

Please tell us about your environment:

  • React version:

16.9.0

  • PrimeReact version:

3.1.4 and also tested on 3.1.8

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 76.0.3809.100

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

@mertsincan mertsincan changed the title Dialog autofocusses first button found Add focusOnShow property to Dialog Aug 27, 2019

@mertsincan mertsincan self-assigned this Aug 27, 2019

@mertsincan mertsincan added this to the 3.1.9 milestone Aug 27, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.