0

I have button icon which is a separate component. I need to give the tab focus on this element after page is rendered. I am using Composition API in Vue 3. I tried adding ref to this component but it seems not working. here is the coding example:

<icon-button
 name="edit"
 :tooltip="$t('Change Profile Picture')"
 @click="openEmployeeProfileModal"
 size="small"
 data-test="profile-modal-trigger"
 class="prof-photo-edit-icon"
 v-if="hasEditPermission"
/>
Improve this question
6
  • Did you try "autofocus" attribute? " I tried adding ref" - what did you try? The question needs stackoverflow.com/help/mcve Commented Dec 1, 2024 at 12:09
  • ref="profileEditIcon" add this to icon-button and inside onmount tried to foucs onMounted(() => { if (profileEditIcon.value) { profileEditIcon.value.focus(); } }); Commented Dec 1, 2024 at 13:09
  • This could work. Please, provide a way to reproduce. Also, "Did you try "autofocus" attribute?" Commented Dec 1, 2024 at 13:21
  • I tried autofoucs also. since icon-button is a seperate component i think ref and autofocus not working. I can't do modification to component also since it is main component which is used in our project all over. Commented Dec 2, 2024 at 3:48
  • When you attempt to focus this element with ref or autofocus it will do so using the root element of the component, which may or may not be focusable. If the element you're trying to focus is nested, you'd need some other strategy. A boolean prop for example, and then component code that sets focus when the prop is true. The idea you can't change the component is not a strong argument, imo. When functionality is tied conditionally to a prop, you can safely modify the component without causing any side effects elsewhere in your app where the component is used. Commented Dec 2, 2024 at 4:45
Related questions
3181
How to stop EditText from gaining focus when an activity starts in Android?
2
Custom Vue dropdown maintain focus
1
How to play sound effects in Vue 3 app with Composition API
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.