How to solve the problem of repeatedly pulling up the input method when switching the input box?

#harmonyos #arkts #textinput #keyboardinteraction

Read the original article：How to solve the problem of repeatedly pulling up the input method when switching the input box?

Problem Description

When facing multiple input fields (such as username, password, verification code), clicking Next on the input method keyboard to jump to the next input field will cause the input method to hide and then pop up, affecting the user experience.

Background Knowledge

In a TextInput, pressing the Enter key triggers the onSubmit() callback. The onSubmit() callback takes two parameters: EnterKeyType and SubmitEvent. EnterKeyType determines the type of Enter key, such as next or done. SubmitEvent is the user submission event and has only the keepEditableState() method.

Troubleshooting Process

Check whether calling the focusControl.requestFocus method caused the TextInput component to lose focus.
Check whether calling the keepEditableState() method prevented the input method keyboard from closing.

Analysis Conclusion

The reason the input method hides and then pops up again is that when executing the focusControl.requestFocus method, the focus shifts to another component, causing a temporary loss of focus.

Solution

By adding an optional SubmitEvent parameter to the TextInput component's onSubmit() method and implementing the SubmitEvent.keepEditableState() method within onSubmit(), you can prevent the input method from closing when the input field loses focus, ensuring that the input method keyboard remains open when switching between edit fields.
However, using the keepEditableState() method on the last input field prevents the input method keyboard from closing with the Enter key. Therefore, you can nest a check for the EnterKeyType outside this method. If the EnterKeyType is next, the keepEditableState() method is executed; if the EnterKeyType is done, it is not executed.

The code example is as follows:

.onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
  let nextKeyNo: number = this.keyNo + 1;
  let nextKeyStr: string = 'code' + nextKeyNo;
  focusControl.requestFocus(nextKeyStr); // focusControl.requestFocus()Call this interface to actively transfer the focus to the component with the specified ID
  if(enterKey == EnterKeyType.Next) {
    event.keepEditableState(); // If the Enter key type is Next, keep the input box open
  }
})

Verification Result

Issue resolved and verified HarmonyOS devices.

DEV Community