Using TAB and SHIFT+TAB
Opened this issue · 0 comments
Hi,
I was using an older version.
This version was adapted to comply with the needs requested, some styling and some behaviour.
One of the behaviors requested is that as soon as the item would get focus, the prompt would display, without the user having to type or click on it, so the search could be immediately started.
The problem arises when tab navigation is used.
When using tab - with a bit of code added - it would move to the next item, without an issue. However, only in a DIALOG POPUP, the shift+tab would go to the previous item, while in a page, goes directly to the URL bar.
I have tried many many different approaches, but I have not been able to make it focus in the previous item.
So I grabbed your latest version, and added the code that was added before - commented, and slowly enabled each piece to see it would react as expected...
SHIFT+TAB now works, in the LATEST version, but TAB will not.
I know this is related to having the prompt out there, but though I've been using promptHIde with the right element to show, it does not.
In console, the document.activeElement shows that the element that should be focused is the correct element, however, for some reason I do not get, the focusing is not being triggered, and if I continue with a TAB (again, in the latest) version, it will go straight to the URL bar.
I have tried many many things, even I tried to put what worked for a shift+tab in the latest release, into the older version I have, but nothing is working.
Can you please help me to see what I am doing wrong here?
There is a weird thing happening...
If I set once the pFocusedElement.focus() (in the promptHide function), the next item is shown as document.activeElement, but actually what is focused is the URL bar.
Now, if I set the .focus() twice, the next item shows like "enabled", for instance, an apex lov item has the prompt shown, and a normal apex item, the inline shows like it was enabled... BUT what is focused, is the URL bar in the browser.
Also, if I set a setTimeout, to occur 3 secs later, it won't focus, unless I click in the document... which just keeps proving that somehow is focusing the url bar, in the browser and OUTSIDE the document.
I am not sure how to change this behavior, nor why is working in the older version (though the shift+tab is not), while in the latest version the shift+tab works, but not the tab.
I thinkI should also add that if pressing F5 to reload page, then it will focus correctly the item, before reloading, so after the focus, something odd is happening and the browser gets focused rather than the page.
And I have also tried using (in the _promptInputKeyDownHandler, the pEvent.preventDefault() and .stopPropagation();, but nothing is avoiding for the browser getting focused.
I have tried in the prompthide, showing the corresponding element and focusing it (this.element.show() / .focus) then focusing on the pFocusedElement, and then hiding this.element, so it would always have something valid to focus on, and still the browser keeps getting focused.
Please, help me if you can, to see what should be done in order to have this navigation tab/shift+tab sorted out.
Thanks!