cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Community Support
Community Support

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

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.
Highlighted
Kudo Kingpin
Kudo Kingpin

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

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!

Highlighted
Helper I
Helper I

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

@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.

Highlighted
Frequent Visitor

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

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.

Highlighted
Super User
Super User

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

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. 

Highlighted
Frequent Visitor

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

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
secondImage

New Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (8,263)