How to solve the problem that the soft keyboard cannot be automatically pulled up when entering the RichEditor component page?

Read the original article：How to solve the problem that the soft keyboard cannot be automatically pulled up when entering the RichEditor component page?

Problem Description

When entering a page containing the RichEditor component, the soft keyboard does not automatically pop up. It only appears after a click.

Background Knowledge

RichEditor is a component that supports mixed text and image layout and interactive text editing. It requires actively acquiring the focus of the current page to bring up the soft keyboard.

Troubleshooting Process

The inability of the RichEditor component to bring up the soft keyboard indicates that the current page focus is not on this component. Therefore, it is necessary to confirm the current page focus.

• First, check if the RichEditor component has been set to acquire focus. Implement the onFocus event listener to see if it is executed;
• Investigate whether there is a conflict with the default focus on the current page. It is necessary to check if other components (including custom components) also acquire focus under the current page layout;
• Identify which specific component has acquired the focus. Implement the onFocus event listener under all focusable components to see which component ultimately acquires the focus on the current page.

Analysis Conclusion

After investigation, it was found that a custom component also had the defaultFocus property set to true, which caused the RichEditor to not acquire focus and thus fail to bring up the software keyboard.

@Entry
@Component
struct Index2 {
  controller: RichEditorController = new RichEditorController();

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .focusable(true)
        .onFocus(() => {
          console.info('RichEditor onfocus')
        })
        .key('editer')
    }
    .width('100%')
    .height('100%')
  }
}

Solution

1. Identify and remove unnecessary components to gain focus.
2. To set the RichEditor component to gain focus, there are two specific methods:

Method 1: Set the defaultFocus property of the RichEditor component to true.

@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .focusable(true)
        .onFocus(() => {
          console.info('RichEditor onfocus')
        })
        .defaultFocus(true)
        .key('editer')
    }
    .width('100%')
    .height('100%')
  }
}

Method 2: Obtain focus through requestFocus after the page is displayed or the component is mounted.

@Entry
@Component
struct Index {
  controller: RichEditorController = new RichEditorController();

  onPageShow(): void {
    focusControl.requestFocus('editer')
  }

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .focusable(true)
        .onFocus(() => {
          console.info('RichEditor onfocus')
        })
        .key('editer')
        .onAppear(() => {
          focusControl.requestFocus('editer')
        })

    }
    .width('100%')
    .height('100%')
  }
}

Complex pages require careful inspection to ensure that only one component has the default focus to avoid conflicts. By setting the defaultFocus property or using requestFocus, the RichEditor can be made to gain focus and bring up the soft keyboard for the first time. The requestFocus method allows dynamic control over which component gains focus. By passing the Key value of another component, it is possible to programmatically control the hiding of the soft keyboard.

Written by Merve Yonetci