@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

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?

@metalsadman Thank you so much, I learned something new. I didn’t know you could override it like that. I only knew how to override it for all

@metalsadman Do you mean setting color=“green” like here?

<q-input label="1" outlined v-model="text" :dense="dense" color="green">

</q-input>

As far as I can tell, this only sets the color when the field has focus

Is there a way to change the outline color of the Input component? This is not a general override, but case by case. E.g. I have a page with 3 Input components, where two of them needs to have a different border color

I tried several methods here: https://codepen.io/Adagio_B/pen/RwaVgOa

Unfortunately none of them seem to work. Either it changes the full div, or it only applies for the input-area

This is getting weird. Yesterday I had two different sets of code that I switched between using while testing. I could only get it working by using the local string array, but not using string array coming from props. Today (without changing any code, only switched between the two sets of code from yesterday) it’s now the opposite, where it only works using string array from props. This is what I was trying to do yesterday, so that’s great, but having no explanation isn’t great
Between each test I did here, I always cleared cache manually, to make sure I was testing all changes

It seems like I managed to get it working (at least in my codepen), where I simply told it to show every time it tried to hide
My project is a bit more advanced, but hopefully I can use the same idea

But why does it work? In the method called I’m using this.show(), but doesn’t “this” refer to the vue js object, not the specific popup proxy?

Ahhh, seems like just using @input fixes the problems. The methods just needs to be empty

Thanks, I’m looking in to that one. The problems I’m facing with this one so far is that when I click on the fields it’s attached to it will toggle the visibility (I’m trying to be the one deciding if it should be visible or not) and remove focus from the field I just put focus in (so I need to click twice for the cursor to stay in the field). Tabbing seems fine, but knowing the users, they will use mouse click

In the below example I’m trying to force the popup on the right to stay open for one of the input fields, while the popup on the left side should stay closed. Unfortunately as soon as I click in any of the input fields, the popup closes (if I click in the input where the popup is closed, the popup becomes visible and focus on input goes away)
https://codepen.io/Adagio_B/pen/pojENMo

@qyloxe said in Trying to build my own Tooltip component:

that should be reported as bug/inconsistency

Will do

@qyloxe said in Trying to build my own Tooltip component:

that’s essentially not tooltip but rather a hint component

Yeah, in my app I’m not calling my component tooltip as it’s not a tooltip IMHO, but from a code perspective it does have some of the same elements (e.g. staying on top of other elements), which is why I’m looking at the code for the Tooltip component

My main concerns with the current tooltip is that in all examples it hides when the user scrolls. I did manage to find a way to stop it from hiding, but then I just realized the tooltip was fixed to a certain position (I want it to stay relative to it’s parent inputfield component), so when I’m scrolling the tooltip stays in place instead of following the component
I’m planning on using it as a errormessage when the user has written data that is not allowed (I wasn’t fond of the built in error for input)