Hi,
I have a scenario where I do not want to show the placeholder in the date filter of UI Grid until the user clicks it. I achieved that using the example given here Kenod Grid - StackBlitz. With this implementation, I'm getting an issue where the filter placeholder doesn't disappear when a browser tab is changed. It only disappears when the area is focused and then clicked outside. This is continuously visible on chromium-based browsers react-bh72m1-a3qerg.stackblitz.io.
1 Answer, 1 is accepted
Hi Ashish,
I have tested the example, but once a new window or a new tab in the browser is focused, the focus from the input element is lost and the placeholder is displayed again. However, when the tab with the Grid is clicked again, the focus will be put back in the same input, thus hiding the placeholder again.
If I am missing something, please share the exact steps to reproduce the issue, what is the problematic behavior that you are observing and what is the expected behavior. In my tests, as long as the focus is lost (either within the page, different tab or different browser window), the placeholder is shown and when the input is focused, the format is displayed as expected.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Steps to reproduce the issue:
- Goto page react-bh72m1-a3qerg.stackblitz.io
- Click on the calendar icon it will show the placeholder in the datepicker.
- Without clicking anywhere on the page, switch the browser to another tab and come back again to this tab. You will observe that the date placeholder is still there.
- Click anywhere on the page. The placeholder will still be there.
- Now click again on the date picker placeholder which will focus it.
- and then when you click out of it the placeholder will disappear.
I have captured this behavior in a GIF. The problem is that the placeholder is still there even when a tab is changed, it should disappear when it is not focused.
Let me know if you need more information to reproduce it.
Hi Ashish,
Thank you for the additional information.
After going through the listed steps I was able to observe the behavior, but I have to say that since the input of the filter is in focus when you return back to the tab with the Grid, it is expected to see the format instead of the placeholder. As you can notice, there is a border around the input which indicates that it is focused when you returned to the tab and since the format is displayed when the input is focused, this is the expected behavior.
If you want to force the blur of the input when changing the browser tabs you can check the discussion in the following forum thread for an event that fires when the browser changes tabs:
You can use that event to force the focus on a different element on the page if you don't want to keep the focus on the filter.
.Hope this helps.