224
Views
4
Comments
Solved
Input onblur preventing list item click event
Question

Hi

I have an input in which I write some text and then a list shows under it with some options matching that text. I have an onblur on the input so that the list disappears when clicked off, but I want the clicking on the list to happen before the onblur triggers (or the action the onblur triggers at least) so that the list item onclick runs - currently it is not running and not 100% sure why? I would think it would call both the onblur and then the list onclick action sequentially...

Is there a way to adjust this timing or do I need to rework this solution? Tried using setTimeout to get the action the onblur calls to happen after the list item click but also did not fix the issue.

2022-05-02 13-50-49
Paulo Ritto
Solution

Hi @Nicholas Campbell
You can just change your onclick event to an onmousedown event, which will trigger before the blur. But be careful with this solution as onmousedown and onclick are not the same and can result in different consequences!!! (onclick is like an onmousedown + onmouseup in the same element).

Anyway, on the other hand, if you want to keep the onclick event, your problem should also be achievable with a setTimeout on the in onblur action, which in turn calls another action to hide the list. I know you said you tried that, but I just did that on my personal environment and it solves the issue.
So, for further help, i would like to check your .oml so that I can help you solve the problem.


Kind regards,
Paulo

2022-11-02 07-18-33
Nicholas Campbell

Also tried putting the onblur rather on the whole block div with the list inside using the tabindex=0 method but that too seemed to stop the list item click from running, also not sure why since the onblur was on the div that the list was inside so should not be triggering until the whole block is unfoccussed?

2022-08-03 04-32-50
Ravi Punjwani

Hi Nicholas,

Sounds like an interesting use case. Can you share your OML to settle the dust about thinking what could be happening in terms of sequence of events. setTimeout should ideally work in this case.

The more complex you make it, the more difficult it would get in configuring it and maintaining it. JS events can consume a lot of your memory, so each event you add needs removing carefully in OnDestroy.

On another note, would you try out using DropdownSearch for finding a record in this list? It may not work if the UI of your list is expected differently than it seems on a dropdown.

2022-05-02 13-50-49
Paulo Ritto
Solution

Hi @Nicholas Campbell
You can just change your onclick event to an onmousedown event, which will trigger before the blur. But be careful with this solution as onmousedown and onclick are not the same and can result in different consequences!!! (onclick is like an onmousedown + onmouseup in the same element).

Anyway, on the other hand, if you want to keep the onclick event, your problem should also be achievable with a setTimeout on the in onblur action, which in turn calls another action to hide the list. I know you said you tried that, but I just did that on my personal environment and it solves the issue.
So, for further help, i would like to check your .oml so that I can help you solve the problem.


Kind regards,
Paulo

2022-11-02 07-18-33
Nicholas Campbell

Hi Ravi and Paulo,

Thanks so much both of you for the solutions.


I am not sure why the setTimout did not work but the onnousedown worked very nicely for this case so I am going to keep that - which is why I marked Paulo as the solution. I can't share the oml due to intellectual property restrictions. And I can't use the normal dropdown search because I need some additional functionality that that doesn't have.

Ravi you mentioned the events - I assume OutSystems adds these when you write it into the Event field and add a handler? Does not not automatically destroy these? If I added it with JS I would not expect it but if doing it using the OS interface I would think it might?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.