react-select inside radix-ui dialog not working properly

[hadson172]

In short, when I place react-select inside radix-ui dialog/popover and when focus is on react-select I am not able to close dialog using ESC. Additionaly "tab" traversal is not working properly. Pressing tab does not traverse between two selects Here is a source code: https://codesandbox.io/s/trusting-dewdney-485wkd?file=%2Fsrc%2FApp.tsx

[NguyenTrung1995]

I have also meet this issue!

[Rall3n]

@hadson172 @NguyenTrung1995 The tab traversal issue must be caused by radix-ui. react-select does nothing on Tab as long as the menu isn't open. With e.g. react-focus-trap I could not replicate the issue.

[philsp]

Workaround that works for my use case until this gets fixed in radix-ui:

const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
  const element = event.relatedTarget;
  if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) {
    (element as HTMLElement).focus();
  }
};

[raihan-suryanom]

Workaround that works for my use case until this gets fixed in radix-ui:

const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
  const element = event.relatedTarget;
  if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) {
    (element as HTMLElement).focus();
  }
};

Alhamdulillah, this works like magic brother 😃just add this on react-select onBlur prop btw

[abartolo]

@philsp Thanks for the workaround. Is there a ticket created for radix-ui that I can follow?

[ss-ravi]

This workaround works great for the TAB problem! is there a workaround for the ESC problem mentioned on the original issue?

[bon3495]

Workaround that works for my use case until this gets fixed in radix-ui:

const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
  const element = event.relatedTarget;
  if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) {
    (element as HTMLElement).focus();
  }
};

Amazing Sir! I had to login to say thank you so much

[jubeatt]

Workaround that works for my use case until this gets fixed in radix-ui:

const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
  const element = event.relatedTarget;
  if (element && (element.tagName === 'A' || element.tagName === 'BUTTON' || element.tagName === 'INPUT')) {
    (element as HTMLElement).focus();
  }
};

Have the same issue too. This approach is good but I still face the other problem when the next focus element is not a standard input element (in my case is "RadioGroup"). so I made some modify to following:

const onBlurWorkaround = (event: React.FocusEvent<HTMLInputElement>) => {
  const element = event.relatedTarget as HTMLElement
  if (element?.getAttribute('role') === 'dialog') return
  element?.focus()
}

I hope this can help someone have the same issue with me. and hope someday this issue can be fixed too.