Hello everyone,
I am currently building my application using ODC and have encountered an issue with the dropdown component.
Specifically, the empty item always appears in the dropdown list when viewed in Safari. I have attempted to hide it using CSS (display: none) and even tried forcing it with JavaScript, but neither approach worked in Safari.
What I would like to achieve is:
When the dropdown first renders, no value should be selected and it should display an empty text.
When the user clicks to open the dropdown, it should only show the list of valid items without showing a default or empty option.
Has anyone experienced a similar issue or found a reliable solution for this behavior, especially in Safari?
Thank you for your support!
Hi Tuan,
I belive Safari can sometimes handle elements like <select> a bit differently than other browsers, which might be causing the issue.
Have you tried using "visibility: hidden"? Someting like this:
.hide { visibility: hidden; width: 0; height: 0;}
Also, to define text when no option is selected you can you the property "Empty Text".
Hello @Beatriz Sabino , I tried your idea but it still don't work, the empty option still show on UI
Hi,I would suggest to :- Set the Empty Text : "Select Option" - Variable attached to the dropdown should be null defaultWith due respect :)Using the CSS approach may not work with Safari...https://stackoverflow.com/questions/13321898/visibility-hidden-is-not-working-in-safari
Good Luck
Hi @Tuan Duong,
Try disabled and hidden attributes (via Extended Properties).
Hope this helps
Thanks