326
Views
5
Comments
Adding extended properties to dropdown search
Application Type
Reactive
Service Studio Version
11.53.11 (Build 61107)
Platform Version
11.14.0 (Build 34092)

Hello,

I have a form where each input widget has an extended property Tabindex, set equal to the order that the widget should come in when a user presses the tab key to go through the form (ex: Tabindex = 1 is the first widget, when user presses the tab key the user can input into the widget with Tabindex = 2). This works fine with my regular input widgets, but when I added a dropdown search widget I found that there is no way to add an extended property, and tab skips over this widget. Is there a way to declare Tabindex for a dropdown widget?


Screenshot 2022-09-20 160141.png
2020-06-08 06-48-23
Divyanshu Pathak

Hi Kate,

I also noticed that if we try to add attributes to the dropdown widget, it actually adds it to the dropdown container. I won't recommend it but you can use JavaScript to add attributes to the dropdown.

Add a JS node in OnReady. Add an input parameter to get the id of your dropdown and use the following code. You can assign your preferred tab index.

Regards,

Divyanshu

UserImage.jpg
Kate Schulte

Hi Divyanshu,

Thanks for the response! I keep on getting an error "Cannot set properties of null (setting 'tabIndex')". Am I setting the parameter incorrectly?

2020-06-08 06-48-23
Divyanshu Pathak

You are adding the js in onReady, right? From the error it is clear that the id you are providing is null. Maybe provide the oml or screen shots so that I can assist you further.

2023-02-27 14-18-56
Jaya Kumar S

Hii @Divyanshu Pathak 

              I too tried this method but I m facing issue can you please me sort out this , but the dropdown is not opening when I clicked Tab.



Regards

Jaya Kumar S

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Jaya,

For the dropdown widget, on tab click, the select element will only get the focus. To open the select option list, the end user will have to explicitly press either the space key or the up/down arrow control keys on element focus. I think it is not possible to open the select option list programmatically with a tab key click. Refer to this link: https://stackoverflow.com/a/430241

I hope this helps you!


Kind regards,

Benjith Sam

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