Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Automatically focus modal when mounted #781

Merged
merged 1 commit into from
Jun 3, 2020
Merged

Conversation

LukasHirt
Copy link
Collaborator

Description

When the modal is mounted, it receives automatically a focus. The focus is sent directly to the modal itself so skipping the wrapping div which works only as a background.

Refs owncloud/web#2263

@LukasHirt LukasHirt requested a review from PVince81 June 2, 2020 11:12
@LukasHirt LukasHirt self-assigned this Jun 2, 2020
@LukasHirt LukasHirt force-pushed the feature/modal-focus branch from b454132 to 24fd16c Compare June 2, 2020 11:13
@LukasHirt LukasHirt force-pushed the feature/modal-focus branch from 24fd16c to 51d04d3 Compare June 2, 2020 11:14
@PVince81
Copy link
Contributor

PVince81 commented Jun 2, 2020

focus is the first step, you should also automatically select whatever is inside the field already to make it easy to start typing

@@ -217,6 +217,12 @@ export default {
}
},

mounted() {
this.$nextTick(() => {
this.$refs.$_ocModal.focus()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this focus on the input field ?

would it also focus on the cancel button if there is no input field ? (if that makes sense)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, it focuses the modal itself because of accessibility as described in here owncloud/web#2263 (comment)

@LukasHirt
Copy link
Collaborator Author

focus is the first step, you should also automatically select whatever is inside the field already to make it easy to start typing

As soon as the input is focused (both click and keyboard) it already selects the whole value of it.

Copy link
Contributor

@PVince81 PVince81 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 then, thanks

@LukasHirt LukasHirt merged commit a230011 into master Jun 3, 2020
@LukasHirt LukasHirt deleted the feature/modal-focus branch June 3, 2020 07:39
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants