problem

Let's talk about the demand scenario where the problem occurs , You need to click to display a drop-down box , Different drop-down boxes correspond to different Modal Components , Including displaying account information , Ban / Enable the account number and fill in the reason and other requirements . Is to use the Dropdown Components +Modal+Input.Textarea Components to do , After finishing, I found a little bug. Click the up, down, left and right buttons in the text field , The cursor does not move with .

terms of settlement

After investigation , Find out Dropdown If you click to select MenuItem after , Do not retract it , Will find , After entering text in the text field , If you click the up and down buttons , The cursor does not move , however MenuItem The selection will move with the keyboard event . This explanation MenuItem perhaps Menu There is also monitoring for keyboard events . It should be something done here that causes the movement of the text field cursor to fail , So what's the solution , Finally found in the text field or MenuItem binding onKeyDown Event in which to prevent event bubbling e.stopPropagation(); , There will be no impact .

Then I tried , The problem is not dropdown Caused by the , It is Menu, Even if we use it alone Menu Component to implement and Modal+ Similar problems occur in text fields . Stop the event from bubbling to solve .

Cause analysis of the problem

I guess the reason for this problem is , Keyboard event after modifying the cursor in the text field , Bubble to Menu in , Click the up, down, left and right keys , Mobile MenuItem The selection effect of , The focus moves from the text field to MenuItem in , Will appear , The problem that the up, down, left and right keys can't control the cursor .