How to focus a SAP UI5 SmartFilterBar SearchField?

Viewed 31

I'm adding a basic SearchField with the SmartFilterBar in SAP UI5. How can I set the focus of the input field in the basic search field?

    <Page id="idMaster" showHeader="true">
        <content>
            <smartFilterBar:SmartFilterBar 
                id="idMasterFilterBar"
                basicSearchFieldName="vbeln"
                enableBasicSearch="true">
                <smartFilterBar:controlConfiguration>
                    <smartFilterBar:ControlConfiguration id="idSmartFilterBarConfiguration"/>
                </smartFilterBar:controlConfiguration>
            </smartFilterBar:SmartFilterBar>
            <.../>
        </content>
     </Page>

Tried this without success:

      onAfterRendering: function () {
        const that = this
        jQuery.sap.delayedCall(5000, null, function () {
          const searchFieldId = that.byId('idMasterFilterBar').getBasicSearch()
          const searchField = that.byId(searchFieldId)
          searchField.focus();
        });
      },

or that...

      onAfterRendering: function () {
        jQuery.sap.delayedCall(5000, null, function () {
          const element = document.querySelector("[type=search]");
          element.focus();
        });
      },
1 Answers

Solved:

After restarting the application with npm run and starting the app fresh from the launchpad, it works.

      onAfterRendering: function () {
        jQuery.sap.delayedCall(500, null, function () {
          const element = document.querySelector("[type=search]");
          element.focus();
        });
     },
Related