ui5-input Exceptions with valueStateMessage in showPopup closePopup

[codefactor]

Describe the bug There are exceptions happening while typing text into the search box of the SuccessFactors header. It appears that there is some sort of timing issue because as the user types some text and search results are returned, the value state is changed to None, and the ui5-popup doesn't exist.

To reproduce

Checkout the following library at the feature/migration branch.

git clone https://github.wdf.sap.corp/xweb/common-webcomponents.git
cd common-webcomponents
git checkout feature/migration
npm install
npm start

1. Navigate to http://localhost:8081/test-resources/pages/index.html
2. Try a search from header, like "car"
3. Add more letters such as "carg"

Expected behavior No errors should appear in the log.

Screenshots

Context

• UI5 Web Components version: 0.21.1
• OS/Platform: {...}
• Browser (if relevant): {...}
• Other information: {...}

Affected components (if known) ui5-input ui5-shellbar

Log output / Any errors in the console

Input.js:654 Uncaught (in promise) TypeError: Cannot read property 'openBy' of null
    at HTMLElement.openPopover (Input.js:654)
openPopover @ Input.js:654
async function (async)
openPopover @ Input.js:653
toggle @ Input.js:636
onAfterRendering @ Input.js:487
_render @ UI5Element.js:515
renderWebComponents @ RenderScheduler.js:83
requestAnimationFrame (async)
scheduleRenderTask @ RenderScheduler.js:56
renderDeferred @ RenderScheduler.js:36
_invalidate @ UI5Element.js:473
set @ UI5Element.js:868
fireEventByAction @ Input.js:726
async function (async)
fireEventByAction @ Input.js:716
_handleInput @ Input.js:600
async function (async)
_handleInput @ Input.js:588
handleEvent @ parts.js:442
EventPart.__boundHandleEvent @ parts.js:408
Input.js:660 Uncaught TypeError: Cannot read property 'close' of null
    at HTMLElement.closePopover (Input.js:660)
    at HTMLElement.toggle (Input.js:638)
    at HTMLElement.onAfterRendering (Input.js:487)
    at HTMLElement._render (UI5Element.js:515)
    at renderWebComponents (RenderScheduler.js:83)
closePopover @ Input.js:660
toggle @ Input.js:638
onAfterRendering @ Input.js:487
_render @ UI5Element.js:515
renderWebComponents @ RenderScheduler.js:83
requestAnimationFrame (async)
scheduleRenderTask @ RenderScheduler.js:56
renderDeferred @ RenderScheduler.js:36
_invalidate @ UI5Element.js:473
set @ UI5Element.js:868
fireEventByAction @ Input.js:726
async function (async)
fireEventByAction @ Input.js:716
_handleInput @ Input.js:600
async function (async)
_handleInput @ Input.js:588
handleEvent @ parts.js:442
EventPart.__boundHandleEvent @ parts.js:408

[ilhan007]

Hey @codefactor Scott

when I clone the repo, switch to the branch, run npm install and npm start to open the test page, I am getting this error in the Header.js, is it only on my side, can you check if you have it as well:

[codefactor]

@ilhan007 , whoops - my bad - I committed that change after I created this issue to that branch. I fixed it just now, please perform a git pull origin feature/migration to pull the latest code that includes the fix to this TypeError.