Nuxt•3mo ago

UModal There are no focusable elements inside the <FocusTrap />

I recently start using nuxt and i'm trying to open a UModal. With my current code, the modal open sometimes. (when it doesn't, shows the message There are no focusable elements inside the <FocusTrap />). here's the gist with the file where i called the modal and the modal file itself: https://gist.github.com/JonatasBSM/f9fc4ae0b36eaca683690ebd951c052c

Gist

UModal There are no focusable elements inside the

UModal There are no focusable elements inside the - documentacao.vue

22 Replies

JonatasBraz•3mo ago

btw, the examples from nuxt documentation are returning the same result

Cue•3mo ago

Which examples?

JonatasBraz•3mo ago

this one, for example

Cue•3mo ago

That's expected for the example. There are no focusable elements in the modal. Btw, I cannot reproduce, but I can with the TipoDocumento modal only because I'm removing all focusable elements. https://stackblitz.com/edit/github-virsxm?file=app.vue

JonatasBraz•3mo ago

are inputs focusable elements?

Cue•3mo ago

Yes. But all your modals have a button (the close modal button) so technically your modals do have a focusable element

JonatasBraz•3mo ago

i didnt get it. I shouldnt receive this error, right?

Cue•3mo ago

No, you shouldn't. But I can't reproduce with the code you've provided, so perhaps something else is happening?

JonatasBraz•3mo ago

can i share with you my github repository? i dont know how to create an example

Cue•3mo ago

Sure

JonatasBraz•3mo ago

https://github.com/JonatasBSM/geFrontEnd

GitHub

GitHub - JonatasBSM/geFrontEnd

Contribute to JonatasBSM/geFrontEnd development by creating an account on GitHub.

JonatasBraz•3mo ago

i think you just need to do a npm install the endpoint for this page is configuracoes/documentos

Cue•3mo ago

Can't reproduce the focus warning from the github repo you've provided either. Might want to remove <body> here too https://github.com/JonatasBSM/geFrontEnd/blob/master/layouts/desktop/dashboard.vue#L23 - a document can only have one body.

JonatasBraz•3mo ago

thanks for the body advise! The modals opened normally to you? Nothing about open one time, dont open next time? maybe i need to update my packages? btw, i just tested on firefox and worked normally. probably is my chrome version

Cue•3mo ago

Possibly. There's a lot of muddling of concepts, but I guess that's going to be part of your learning journey. For example, maybe avoid assigning a ref to the modal, and use v-model instead, etc.

JonatasBraz•3mo ago

i see i'll take your tips with me in this journey you're very kind we'll probably talk again soon thank you!

Cue•3mo ago

Any time!

JonatasBraz•3mo ago

Hey! About using v-model instead of ref, it would be a prop on child component?

Cue•3mo ago

Kind of. There’s a shorthand way of doing it by using defineModel But essentially it’s prop & emit

JonatasBraz•3mo ago

Parent:

const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}


<logout v-model="modalState" />

const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}


<logout v-model="modalState" />

Child:

<UModal v-model="modalState" title="Logout" @close="flOppened = false">


const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}

<UModal v-model="modalState" title="Logout" @close="flOppened = false">


const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}

like this? thatś really clean

Cue•3mo ago

Essentially yes, but don’t forget to use defineModel in the child, since that is the state being received from the parent. https://vuejs.org/guide/components/v-model.html

Vue.js

Vue.js - The Progressive JavaScript Framework

JonatasBraz•3mo ago

I used it! Just forgot to show you 🤣. That's really cool

Gaming

Programming

UModal There are no focusable elements inside the <FocusTrap />