Unfocus button Vue 3

@vincent15000 my-menu does have a close event, how can I set blur on a button?

@msslgomez From the menu, you emit the close event to the parent. And the parent will blur the button.

<my-menu :show="showMenu" @close="showMenu = false; button.blur()" :items="menuItems"></my-menu>

Sure you have to replace button with the right variable to access to your button instance.

You can also extract the actions to a method.

<template>
	<button ref="button">Open the modal</button>
	...
	<my-menu :show="showMenu" @close="close()" :items="menuItems"></my-menu>
</template>

<script setup>
	const showMenu = ref(false);
	const button = ref(null);
	function close() {
		showMenu.value = false;
		button.blur();
	}
</script>

@vincent15000 I tried following this https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

This is my code

<script setup>
import {ref} from "vue";
const menuButton = ref(null);
</script>

<template>
...
	<!-- Menu Button-->
	<primary-button ref="menuButton"
			@click="showMenu = !showMenu"
        	icon type="button"
        	variant="transparent">
        		<menu-icon class="h-6 w-auto"/>
	</primary-button>
...

<my-menu :show="showMenu" @close="showMenu = false; menuButton.value.blur()" :items="menuItems"></my-menu>

</template>

This doesn't do anything right now, I also tried menuButton.blur() but got an error instead, am I missing something?

@msslgomez

menuButton.value.blur() => value is to be put only in the script, not in the template.

So menuButton.blur() will probably work if you write it in the template.

And menuButton.value.blur() will work if you write it in the script.

@vincent15000 I get this error

Uncaught TypeError: $setup.menuButton.blur is not a function

@msslgomez It should work, unless I don't have all informations about your code.

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/blur

Does <primary-button> come from a framework ?

@msslgomez

<my-menu :show="showMenu" @close="showMenu = false; menuButton.blur()" :items="menuItems"></my-menu>

@vincent15000 primary-button is this component

<script setup>
import {computed} from "vue";

const props = defineProps({
    type: {
        type: String,
        default: 'submit',
    },
    icon: {
        type: Boolean,
        default: false
    },
    variant: {
        type: String,
        default: null
    }
});

const getVariant = computed(() => {
    switch (props.variant) {
        case 'accent':
            return '...'
        case 'secondary':
            return '...'
        case 'transparentDark':
            return '...'
        case 'transparentLight':
            return '...'
        default:
            return '...'
    }
});
</script>

<template>
    <button :type="type"
            :class="[icon ? 'p-2' : 'px-4 py-2', getVariant]"
            class="inline-flex items-center rounded-md text-[13px] font-medium focus:outline-none transition ease-in-out duration-150">
        <slot/>
    </button>
</template>

@msslgomez You can for example add a ref to the button in the child component.

<button
	ref="childButton"
	:type="type"
    :class="[icon ? 'p-2' : 'px-4 py-2', getVariant]"
    class="inline-flex items-center rounded-md text-[13px] font-medium focus:outline-none transition ease-in-out duration-150">
    <slot/>
</button>

And the in the script of the parent you can easily access to the button.

<script setup>
	function anyFunction() {
		menuButton.value.childButton.value.blur();
	}
</script>