Popup Proxy focus issue



  • Hi

    I’m having a weird focus issue I’m hoping there’s a kind soul here, who can help me with

    The situation is that I have a dialog window with a lot of Input components. It’s a deep component structure and haven’t been able to recreate the problem in codepen.
    Simplified I have a structure that looks a bit like this:

    <form id="form1" runat="server">
       <div id="q-app" class="pageBackground pageHeight .col-12">
          <q-dialog>
             <q-card style="width: 1200px; max-width: 80vw;">
                <q-input label="no" @focus="FocusChanged('no')">
                </q-input>
                <q-popup-proxy :value="show" @input="KeepAlive">
                   <q-card bordered>
                      // Some q-card stuff
                   </q-card>
                </q-popup-proxy>
                <q-input label="temp" @focus="FocusChanged('temp')">
                </q-input>
             </q-card>
          </q-dialog>
       </div>
    </div>
    
    FocusChanged(sender)
    {
       if (sender === 'no')
          this.show = true;
       console.log('FocusChanged')
       console.log(sender)
    },
    

    When the Input named no gets focus, I’m setting a Popup Proxy to be visible. This Popup Proxy has a Card component as content (not really anything inhere, just a q-card-section with an icon and some simple text)
    The KeepAlive method is just an empty method. I have noticed just by having this one I can keep the popup proxy open

    My issue is that when this Popup Proxy is open and I click in a different Input component (like the one called Temp), the following is shown in the console:

    FocusChanged
    temp
    FocusChanged
    no

    At first the FocusChanged method is called correctly, but then for some unknown reason @focus is also called for the field that activated the opening of the popup, causing it to regain focus instead of setting focus to the component that I clicked in

    I tried recreating it here, but it works even less here than in my actual code: https://codepen.io/Adagio_B/pen/vYGjLPr?editors=1010
    In the codepen the popup proxy is locking everything behind from being clicked in, in my actual code this is not the case. I can’t see why it locks everything in codepen, but not in my actual code. The situation in my actual code is correct; it should not lock everything as this popup should just be used as an optional tool/info for the user

    Anybody who has any idea what could be wrong?



  • @AdrianG your QPopupProxy don’t have parent, should be a child of your input. Imo, if you want it to be generic for both input, then better use a QDialog instead.



  • This post is deleted!


  • @metalsadman

    Thanks. I tried changing it to a Q-dialog, but the issue is still the same. Same thing happened when I added it as a child to my input
    It’s not high priority, so maybe I’ll try to fix it some other day


Log in to reply