fix(core/menu-about): unwanted behavior on fast tab change

[matthiashader]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (yarn build) was run locally and any changes were pushed
• Unit tests (yarn test) were run locally and passed
• Visual Regression Tests (yarn visual-regression) were run locally and passed
• Linting (npm lint) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bug fix
• Feature
• Refactoring (no functional changes, no API changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

GitHub Issue Number: #879

What is the new behavior?

Removed the timeout and implemented a single source of truth for menu-settings and menu-about.

Does this introduce a breaking change?

• Yes
• No

Testing

Manual testing.

Other information

[danielleroux]

PR fixes only menu-about but menu-settings contains a similar implementation. Was this also checked?

//EDIT Can you add more information to the PR description

[matthiashader]

PR fixes only menu-about but menu-settings contains a similar implementation. Was this also checked?

//EDIT Can you add more information to the PR description

I tried to reproduce it, but could not reproduce the error in the menu-settings:
async delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

async fastChange() {
const menuSettings = document.querySelector('ix-menu-settings');
const menuSettingsShadowRoot = menuSettings.shadowRoot;
const menuSettingsItems =
menuSettingsShadowRoot.querySelectorAll('ix-tab-item');

for (let i = 0; i < 100; i++) {
  for (const elements of Array.from(menuSettingsItems)) {
    await elements.click();
    await this.delay(10);
  }
  console.log(i);
}

}

render() {
return (

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.


Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet,




<ix-button
onClick={() => {
this.fastChange();
}}
>
PUSH ME