Tab Handling

[sagedemdreisbusch]

Hi Sasha,
currently we are having some troubles with tab-handling. During reasearch I found out, that there is no possibility to give the component an own tabIndex. Might it be possible to give tabIndex as a prop to the main component for setting it to the high div and also to the input component? (we have an own content renderer but currently using the default input)

If you wish us to contribute, just tell me.

Thanks a lot and best wishes
Max

[sanusart]

Hey, maybe I am missing something, but there is tabindex on the component, also there is "additionalProps" prop available to pass more props to a component.

…

On Mon, Oct 21, 2019 at 3:11 PM sagedemdreisbusch ***@***.***> wrote: Hi Sasha, currently we are having some troubles with tab-handling. During reasearch I found out, that there is no possibility to give the component an own tabIndex. Might it be possible to give tabIndex as a prop to the main component for setting it to the high div and also to the input component? (we have an own content renderer but currently using the default input) If you wish us to contribute, just tell me. Thanks a lot and best wishes Max — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#46?email_source=notifications&email_token=AACBLRW4QHNGEXJKNQJXJZTQPWL6NA5CNFSM4JC4MWS2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HTEZFJQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACBLRX54IZTANXDRTRIBRDQPWL6NANCNFSM4JC4MWSQ> .

[sagedemdreisbusch]

You are right, there is a tabindex, but it does not override anything, does it? If I give the prop tabindex={-1} to any of the two, nothing happens on DOM

[sanusart]

Have you tried: additionalProps={ { tabIndex: -1 } }

…

On Mon, Oct 21, 2019 at 4:34 PM sagedemdreisbusch ***@***.***> wrote: You are right, there is a tabindex, but it does not override anything, does it? If I give the prop tabindex={-1} to any of the two, nothing happens on DOM — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#46?email_source=notifications&email_token=AACBLRV4HFBIGUDVMWI6WHDQPWVWJA5CNFSM4JC4MWS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB2KXUI#issuecomment-544517073>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACBLRQVDDQZVGKX34ESGYTQPWVWJANCNFSM4JC4MWSQ> .

[sagedemdreisbusch]

Yeah I did, then the select is not entered any more even if I put tabIndex: 0 in the Input component. The problem is, that the tab handling is working fine on Pressing 'Tab' but normally you can go to previous fields with Shift+'Tab' but this is not working. Have you got any suggestions for that?

[sanusart]

I guess tabs listeners can be added along with the arrows here:

react-dropdown-select/src/index.js

Line 358 in 98ad37d

handleKeyDownFn = ({ event, state, props, methods, setState }) => {

But I suspect it wont be as easy as just to add them.
Will look into that as this is probably proper behaviour. If you have any suggestions, please share.

Haven't #28 worked out?

[sagedemdreisbusch]

Yeah #28 worked great for dropdown handling and also for the normal Tab, but shift-tab is not working either
Am trying to fix it and giving you feedback

[sanusart]

So latest latest should have the tabs

[sagedemdreisbusch]

That's great, a lot of thanks

[lopesc]

This doesn't seems to work out of the box when using customItemRenderer - is there a recommended way to hook into the key navigation?

[sanusart]

handleKeyDownFn Should do it I think, last in the table here https://sanusart.github.io/react-dropdown-select/api

…

On Fri, Nov 22, 2019, 7:43 PM lopesc ***@***.***> wrote: This doesn't seems to work when using customItemRenderer - is there a recommended way to hook into the key navigation. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#46?email_source=notifications&email_token=AACBLRR6AUZY5IFDTWIFEQDQVAK5LA5CNFSM4JC4MWS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE6LHZY#issuecomment-557626343>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACBLRUGHWIKOH7K65BWUELQVAK5LANCNFSM4JC4MWSQ> .

[lopesc]

Hmmm ok, I'll take a look. My understanding is that the internal handleKeyDown function performs a lot of information related to updating the stat of the dropdown, selected items, etc... I don't really want to override any of that - just need a way to hook into what item is currently selected in the results.

[sanusart]

Oh I think you can get it via state.values, it looks exposed in itemRenderer param. Will that work?

[lopesc]

Will take a look, thanks for the advice

[quockhanhle93]

Yeah #28 worked great for dropdown handling and also for the normal Tab, but shift-tab is not working either
Am trying to fix it and giving you feedback

Hi @sagedemdreisbusch , have "Shift + Tab" worked on latest version? I try to download the latest version (v4.3.0), it is well working with Tab by moving to a next element, but "Shift + Tab" does not go back to the previous element. Any suggestion, thanks a lot?

[quockhanhle93]

@sanusart May you give me some suggestions on "Shift + tab" issue. Thanks a lot.

[sanusart]

@quockhanhle93 It works on the main demo. https://sanusart.github.io/react-dropdown-select/
Are you overriding something?

[quockhanhle93]

@sanusart Sorry for not describing my issue carefully.

My issue is to move from 1 dropdown to another dropdown. It works well with Tab to move forward to next element. For Shift tab, it is expected to move back to the previous dropdown (or another element), but it is not. Please help me see below image, for using Shift + tab, it is expected to jump back to github icon.

Anyway, I overrides handleKeyDownFn to only use arrowUp and arrowDown to moving among options.

const handleKeyDownFn = ({ event, state, props, methods, setState }) => {
    const { cursor } = state
    const escape = event.key === 'Escape'
    const enter = event.key === 'Enter'
    const arrowUp = event.key === 'ArrowUp'
    const arrowDown = event.key === 'ArrowDown'
    const backspace = event.key === 'Backspace'
    const tab = event.key === 'Tab' && !event.shiftKey
    const shiftTab = event.shiftKey && event.key === 'Tab'

    if (enter && cursor === null) {
      setStatus({ shown: true })
      return setState({
        cursor: 0
      })
    }

    if (arrowUp || arrowDown || shiftTab || tab) {
      event.preventDefault();
    }

    if (enter || tab || shiftTab) {
      const currentItem = methods.searchResults()[cursor]
      if (currentItem && !currentItem.disabled) {
        if (props.create && valueExistInSelected(state.search, state.values, props)) {
          return null
        }
        methods.addItem(currentItem)
      }
    }    

    if (arrowDown && methods.searchResults().length === cursor) {
      setState({
        cursor: 0
      })
    }

    if (arrowUp && cursor === 0) {
      setState({
        cursor: methods.searchResults().length - 1
      })
    }

    if (backspace && props.multi && props.backspaceDelete && getInputSize() === 0) {
      setState({
        values: state.values.slice(0, -1)
      })
    }
  }

[sanusart]

Yes, I see how it braking the chain of shift+tab navigation.
Probably related to what we discussed in #88 need to find fine line to handle proper keyboard navigation also outside the component.

[quockhanhle93]

Yes, you are right. It is somehow related to what we discussed in #88. Thanks @sanusart