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

Allow click outside for Popover focus trap #3022

Merged
merged 1 commit into from
Aug 12, 2022

Conversation

raimund-schluessler
Copy link
Contributor

@raimund-schluessler raimund-schluessler commented Aug 12, 2022

Similar to #3020 this fixes an issue with the Popver/Actions focus-trap which was added in #2941 and prevented directly opening another Actions menu, when one was already open. Before, you would need two clicks on the second Actions menu trigger to open the other Actions menu, one for closing the first one, one for actually opening the second one.

Try this example code by copying into the docs:

<template>
    <div>
        <Actions>
            <ActionButton @click="actionDelete">
                <template #icon>
                    <Delete :size="20" />
                </template>
                Delete
            </ActionButton>
            <ActionButton @click="actionDelete">
                <template #icon>
                    <Delete :size="20" />
                </template>
                Delete
            </ActionButton>
        </Actions>
        <Actions>
            <ActionButton @click="actionDelete">
                <template #icon>
                    <Delete :size="20" />
                </template>
                Delete
            </ActionButton>
            <ActionButton @click="actionDelete">
                <template #icon>
                    <Delete :size="20" />
                </template>
                Delete
            </ActionButton>
        </Actions>
    </div>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete'

export default {
	components: {
		Delete,
	},
	methods: {
		actionDelete() {
			alert('Delete')
		},
	},
}
</script>

With this PR, each Actions menu opens after one click, no matter if the other is open or not.

There is still an issue open, preventing focusing any other element from within the Actions menu, see #3021.

@raimund-schluessler raimund-schluessler added this to the 6.0.0 milestone Aug 12, 2022
@raimund-schluessler raimund-schluessler added bug Something isn't working 3. to review Waiting for reviews feature: actions Related to the actions components regression Regression of a previous working feature labels Aug 12, 2022
@raimund-schluessler raimund-schluessler marked this pull request as ready for review August 12, 2022 11:42
@raimund-schluessler raimund-schluessler added the feature: popover Related to the popovermenu component label Aug 12, 2022
@raimund-schluessler raimund-schluessler merged commit 1babd56 into master Aug 12, 2022
@raimund-schluessler raimund-schluessler deleted the fix/noid/actions-focus branch August 12, 2022 11:51
@skjnldsv skjnldsv mentioned this pull request Aug 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug Something isn't working feature: actions Related to the actions components feature: popover Related to the popovermenu component regression Regression of a previous working feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants