In the Playground Editor of a document, the Editor Tab and Options Tab automatically lose focus after switching between them.

[declanchiu]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

2.1.0

Link to runnable example

No response

Steps to reproduce

Click on the Playground page, first enter the content in the Editor tab, then click on the options tab and then come back to the Editor tab to enter the content, then the focus will be lost automatically.

👉 https://mdxjs.com/playground/

I am still in process in learning English. Sorry!😜

Expected behavior

The editor should type normally after switching tab selections

Actual behavior

The editor is behaving unusually out of focus after switching the Tab

Runtime

No response

Package manager

No response

OS

macOS

Build and bundle tools

No response

[wooorm]

Weird!

• I believe it is recent that this started happening
• We also recently updates react-tabs, coincidence?!
• Apparently, that did some things to focus? https://github.com/reactjs/react-tabs/releases

Are you perhaps interested in investigating the problem? Perhaps this is a problem with them? Or we need to change something in the tabs here?

[declanchiu]

I would be more than happy to look into it 🦾

[declanchiu]

@wooorm reactjs/react-tabs#451
There are already corresponding issues, and it is indeed a problem with react-tabs

[danez]

Hello :)

So I just released version v4.2.0 of react-tabs, which includes a fix for the focus.

The problem here in this ticket is different though: The behavior for focus changed in v4 so that tabs are instantly focused on click to allow instant keyboard navigation. To disable this again I added a new prop focusTabOnClick, which disables this and does not mess with focus on click: https://github.com/reactjs/react-tabs#focustabonclick-boolean

This should make react-tabs not focus itself on click and leave the focus untouched. Can you check if this helps?

[wooorm]

Thanks Daniel!

@PlayGuitar-CoderQ Could you try that?

[declanchiu]

No problem, I'll check it out.

[declanchiu]

@wooorm But I'm running mdx according to the contribution guide and there's an error reported that I haven't understood what's causing it. 🤔

[wooorm]

Hmm I believe currently you need to be on Node 14 for this.
I'll check later and update the docs.

[declanchiu]

Thanks， It's true that my version of node is too high.

After I ran the run docs for the first time

I ran index.html under public on the local server and found that index.css was introducing errors and that the page was not styled

[wooorm]

You should be able to create a server inside the public/ folder, then the styles should work.

[declanchiu]

Thank you for your patience and answers 👍.

I have successfully run and tested react-tabs@4.2.0 to resolve this issue, so just upgrade react-tabs.😁
gif picture：👇

[declanchiu]

@danez Thanks Daniel! I have tested your fix with no problems.
I was going to try to fix this, but you fixed it quickly. 👍👍

[wooorm]

Thanks @PlayGuitar-CoderQ for the pull request, and @danez for the upstream fix!