cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
skylitedave
Kudo Kingpin
Kudo Kingpin

How to use Tab Index Property with Dropdowns and Date Pickers?

Hi,

 

I am trying to let users tab across a form with text controls, Dropdowns, and Date Pickers left to right and top to bottom.  Trying to set the Tab Index property as expected DOES NOT WORK.  The tabs will go through every regular text input control on a page and then start working through the Dropdowns and date pickers regardless of what values you set in the Tab Index property.

 

Does anyone have insight into how to set the tab index so it works across all control types properly?

 

6 REPLIES 6
v-yutliu-msft
Community Support
Community Support

Hi @skylitedave ,

Could you show me how do you set tabindex in details?

I've made a similar test but not met the same problem like your description.

The tabs will go through from left to right and from top to bottom in order, no matter what controls.

Here's my test for your reference:

1)I set the first control's TabIndex:1

I set the second control's TabIndex:2

I set the third control's TabIndex:3

I set the fourth control's TabIndex:4

.....

11278.PNG

 

11279.PNG

 

11270.PNG

 

112711.PNG

 

Then the tab will go through in order.

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi,

I think I have identified the issue

 

If you add a custom complex control into a datacard ( like a dropdown)  and hide the default control in the datacard, then Tab Index property does not work in the custom complex control.  The Tab Index property ONLY works on default controls within a datacard or simple text entry controls and NOT complex controls like a dropdown.  

 

Looks like a bug in PowerApps..

 

To test, see if you hide the default control in the datacard on that form you created and add a new dropdown control and set the Tab Index in that custom control.  I bet it does not work.  The tab will just skip over the new dropdown control...

 

Test it out and let me know what you find and if you confirm the issue.  If so I will enter this in as a bug....

 

Thx!

Anonymous
Not applicable

@skylitedave  I just came across this issue and found this thread - not sure if this was ever escalated - tabindex will not work on date pickers, dropdowns etc, only regular plain ole text inputs.

julianritchey
Frequent Visitor

The tab index appears to work for Dropdowns in Edit mode, though not View mode. No tab index functionality for Date Pickers in either mode.

I wonder if you added a textinput box to the card and set its value to the datepicker.SelectedDate and then hid it. then you could use the tabindex on it. 

Hiding an element (setting its Visibility to False) prevents a user from focusing on it. (Great when hiding custom pop-ups) Regardless, focusing on a Text Input would not allow a user to utilize the Date Picker functionality using only a keyboard. (So, no hiding the Text Input behind the Date Picker, either)

Helpful resources

Announcements
Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Top Kudoed Authors
Users online (3,365)