@dhis2-ui/select 10.9.2 → 10.10.0-alpha.2

package/build/es/simple-single-select/features/keyboard-interactions.test.e2e.js

@@ -0,0 +1,439 @@
+describe('<SimpleSingleSelect/>', () => {
+  it('should highlight the first option on the currently displayed page', () => {
+    cy.log('**Given a select with 100 options is displayed**');
+    cy.visitStory('Simple Single Select', 'Hundret Options');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 74th option is being highlighted**');
+    cy.findByRole('combobox').focus().type(`Select option 73`);
+    cy.log('**And the 70th option is the first option on the current page**');
+    let optionOffset;
+    cy.findAllByRole('option').eq(70).then(option => {
+      const {
+        offsetTop
+      } = option.get(0);
+      optionOffset = offsetTop;
+    });
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('parent') // listbox
+    .invoke('parent') // scrollable div
+    .then(listBoxParent => {
+      listBoxParent.get(0).scrollTop = optionOffset;
+    });
+    cy.findAllByRole('option').eq(70).should('be.visible');
+    cy.log('**When the PageUp key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageUp',
+      force: true
+    });
+    cy.log('**Then the first option on the currently displayed page is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('attr', 'aria-label').should('equal', 'Select option 70');
+  });
+  it('should highlight the first enabled option before the first (disabled) option on the currently displayed page', () => {
+    cy.log('**Given a select with 100 options is displayed and option #17 is disabled**');
+    cy.visitStory('Simple Single Select', 'Hundret Options With Disabled');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 26th option is being highlighted**');
+    cy.findByRole('combobox').focus().type(`Select option 25`);
+    cy.log('**And the 17th option is the first option on the current page**');
+    let optionOffset;
+    cy.findAllByRole('option').eq(17).then(option => {
+      const {
+        offsetTop
+      } = option.get(0);
+      optionOffset = offsetTop;
+    });
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('parent') // listbox
+    .invoke('parent') // scrollable div
+    .then(listBoxParent => {
+      listBoxParent.get(0).scrollTop = optionOffset;
+    });
+    cy.findAllByRole('option').eq(17).should('be.visible');
+    cy.log('**When the PageUp key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageUp',
+      force: true
+    });
+    cy.log('**Then the first option on the currently displayed page is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('attr', 'aria-label').should('equal', 'Select option 16');
+  });
+  it('should highlight the first option on the previous page', () => {
+    cy.log('**Given a select with 100 options is displayed**');
+    cy.visitStory('Simple Single Select', 'Hundret Options');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 70th option is being highlighted**');
+    // Will automatically scroll there and make it the first option on the page
+    cy.findByRole('combobox').focus().type(`Select option 70`);
+    cy.log('**When the PageUp key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageUp',
+      force: true
+    });
+    cy.log('**Then the first option on the previous page is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('attr', 'aria-label').should('equal', 'Select option 61');
+
+    // That option is truly the first option
+    cy.get('[role="option"]:visible').first().invoke('attr', 'aria-label').should('equal', 'Select option 61');
+    cy.log('**And the previously highlighted option is not visible**');
+    cy.findAllByRole('option').eq(70).should('not.be.visible');
+  });
+  it('should highlight the first enabled option before the first (disabled) option on the previous page', () => {
+    cy.log('**Given a select with 100 options is displayed and option #17 is disabled**');
+    cy.visitStory('Simple Single Select', 'Hundret Options With Disabled');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 27th option is being highlighted**');
+    // Will automatically scroll there and make it the first option on the page
+    cy.findByRole('combobox').focus().type(`Select option 27`);
+    cy.log('**When the PageUp key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageUp',
+      force: true
+    });
+    cy.log('**Then the first option on the previous page is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('attr', 'aria-label').should('equal', 'Select option 16');
+    cy.log('**And that option is truly the first option**');
+    cy.get('[role="option"]:visible').first().invoke('attr', 'aria-label').should('equal', 'Select option 16');
+    cy.log('**And the previously highlighted option is not visible**');
+    cy.findAllByRole('option').eq(27).should('not.be.visible');
+  });
+  it('should highlight the first option', () => {
+    cy.log('**Given a select with 100 options is displayed**');
+    cy.visitStory('Simple Single Select', 'Hundret Options');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 2nd option is being highlighted**');
+    cy.findByRole('combobox').focus().type(`Select option 1`);
+    cy.log('**And the 2nd option is the first option on the current page**');
+    let optionOffset;
+    cy.findAllByRole('option').eq(1).then(option => {
+      const {
+        offsetTop
+      } = option.get(0);
+      optionOffset = offsetTop;
+    });
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('parent') // listbox
+    .invoke('parent') // scrollable div
+    .then(listBoxParent => {
+      listBoxParent.get(0).scrollTop = optionOffset;
+    });
+    cy.log('**When the PageUp key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageUp',
+      force: true
+    });
+    cy.log('**Then the first option is being highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.all(() => cy.findAllByRole('option').invoke('get', 0), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref => {
+      let [firstOption, highlightedOption] = _ref;
+      expect(highlightedOption).to.equal(firstOption);
+    });
+  });
+  it('should highlight the second option when the first option is disabled', () => {
+    cy.log('**Given a select with 100 options is displayed and option #2 is disabled**');
+    cy.visitStory('Simple Single Select', 'Hundret Options With Disabled');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 3rd option is being highlighted**');
+    cy.findByRole('combobox').focus().type(`Select option 2`);
+    cy.log('**And the 3rd option is the first option on the current page**');
+    let optionOffset;
+    cy.findAllByRole('option').eq(2).then(option => {
+      const {
+        offsetTop
+      } = option.get(0);
+      optionOffset = offsetTop;
+    });
+    cy.findByRole('option', {
+      selected: true
+    }).invoke('parent') // listbox
+    .invoke('parent') // scrollable div
+    .then(listBoxParent => {
+      listBoxParent.get(0).scrollTop = optionOffset;
+    });
+    cy.log('**When the PageUp key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageUp',
+      force: true
+    });
+    cy.log('**Then the second option is being highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.all(() => cy.findAllByRole('option').invoke('get', 1), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref2 => {
+      let [firstOption, highlightedOption] = _ref2;
+      expect(highlightedOption).to.equal(firstOption);
+    });
+  });
+  it('should highlight the last option on the currently displayed page', () => {
+    cy.log('**Given a select with 100 options is displayed**');
+    cy.visitStory('Simple Single Select', 'Hundret Options');
+    cy.log('**And the menu is visible**');
+    // first option will be highlighted automatically
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**When the PageDown key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageDown',
+      force: true
+    });
+    cy.log('**Then the last option on the currently displayed page is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.all(() => cy.get('[role="option"]:visible').last().invoke('get', 0), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref3 => {
+      let [lastVisibleOption, highlightedOption] = _ref3;
+      expect(highlightedOption).to.equal(lastVisibleOption);
+    });
+  });
+  it('should highlight the first enabled option after the last (disabled) option on the currently displayed page', () => {
+    cy.log('**Given a select with 100 options is displayed and option #17 is disabled**');
+    cy.visitStory('Simple Single Select', 'Hundret Options With Disabled');
+    cy.log('**And the 9th option is being selected (will cause it to be the first option on the page when opening the menu)**');
+    cy.findByRole('combobox').focus().type(`Select option 9`);
+    cy.log('**And the menu is visible**');
+    // first option will be highlighted automatically
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+
+    // That option is truly the first option
+    cy.get('[role="option"]:visible').first().invoke('attr', 'aria-label').should('equal', 'Select option 9');
+    cy.log('**When the PageDown key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageDown',
+      force: true
+    });
+
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.log('**Then the first enabled option after last option on the currently displayed page is highlighted**');
+    cy.all(() => cy.findAllByRole('option').invoke('get', 19), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref4 => {
+      let [eighteensOptions, highlightedOption] = _ref4;
+      expect(highlightedOption).to.equal(eighteensOptions);
+    });
+    cy.log('**And the first enabled option after last option on the currently displayed page is the first visible option**');
+    cy.all(() => cy.get('[role="option"]:visible').invoke('get', 0), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref5 => {
+      let [lastVisibleOption, highlightedOption] = _ref5;
+      expect(highlightedOption).to.equal(lastVisibleOption);
+    });
+  });
+  it('should highlight the last option on the next page',
+  // We don't want the options to scroll when we check whether they're
+  // visible or not (as that'd make them visible)
+  {
+    scrollBehavior: false
+  }, () => {
+    const LAST_VISIBLE_OPTION_INDEX = 8;
+    cy.log('**Given a select with 100 options is displayed**');
+    cy.visitStory('Simple Single Select', 'Hundret Options');
+    cy.log('**And the last option on the first page is selected**');
+    cy.findByRole('combobox').focus().type(`Select option 8`);
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.get('[role="option"]').eq(LAST_VISIBLE_OPTION_INDEX).invoke('attr', 'aria-selected').should('equal', 'true');
+    cy.log('**When the PageDown key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageDown',
+      force: true
+    });
+    cy.log('**Then the next page is shown**');
+    cy.get('[role="option"]').eq(LAST_VISIBLE_OPTION_INDEX).should('not.be.visible');
+    cy.get('[role="option"]').eq(LAST_VISIBLE_OPTION_INDEX + 1).should('be.visible');
+    cy.log('**And the last option on the next page is highlighted**');
+    cy.get('[role="option"]:visible').last().invoke('attr', 'aria-selected').should('equal', 'true');
+    cy.log('**And the previously highlighted option is not visible**');
+    cy.get('[role="option"]').eq(LAST_VISIBLE_OPTION_INDEX + 1).invoke('attr', 'aria-selected').should('equal', 'false');
+  });
+  it('should highlight the first enabled option after the last (disabled) option on the next page',
+  // We don't want the options to scroll when we check whether they're
+  // visible or not (as that'd make them visible)
+  {
+    scrollBehavior: false
+  }, () => {
+    cy.log('**Given a select with 100 options is displayed and option #17 is disabled**');
+    cy.visitStory('Simple Single Select', 'Hundret Options With Disabled');
+    cy.log('**And the 2nd option is being selected**');
+    cy.findByRole('combobox').focus().type(`Select option 9`);
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 2nd option is the first option on the current page**');
+    cy.all(() => cy.findAllByRole('option').eq(1),
+    // scrollable div
+    () => cy.findByRole('option', {
+      selected: true
+    }).invoke('parent').invoke('parent')).then(_ref6 => {
+      let [nextTopOption, listBoxParent] = _ref6;
+      const {
+        offsetTop
+      } = nextTopOption.get(0);
+      listBoxParent.get(0).scrollTop = offsetTop;
+    });
+    cy.wrap(9).as('lastVisibleOptionIndex');
+    cy.get('@lastVisibleOptionIndex').then(lastVisibleOptionIndex => {
+      cy.get('[role="option"]').eq(lastVisibleOptionIndex).invoke('attr', 'aria-selected').should('equal', 'true');
+    });
+    cy.log('**When the PageDown key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageDown',
+      force: true
+    });
+    cy.log('**Then the next page is shown,**');
+    // but one option is skipped due to the disabled option at the end of the next page
+    cy.get('@lastVisibleOptionIndex').then(lastVisibleOptionIndex => {
+      cy.get('[role="option"]').eq(lastVisibleOptionIndex + 1).should('not.be.visible');
+      cy.get('[role="option"]').eq(lastVisibleOptionIndex + 2).should('be.visible');
+    });
+    cy.log('**And the last option on the next page is highlighted**');
+    cy.get('[role="option"]:visible').last().invoke('attr', 'aria-selected').should('equal', 'true');
+    cy.get('[role="option"]:visible').last().invoke('attr', 'aria-label').should('equal', 'Select option 19');
+  });
+  it('should highlight the last option',
+  // We don't want the options to scroll when we check whether they're
+  // visible or not (as that'd make them visible)
+  {
+    scrollBehavior: false
+  }, () => {
+    cy.log('**Given a select with 100 options is displayed**');
+    cy.visitStory('Simple Single Select', 'Hundret Options');
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 2nd-last option is being highlighted and visible**');
+    for (let i = 0; i < 98;
+    // This will bring us to the second last option exactly
+    ++i) {
+      cy.findByRole('combobox').trigger('keydown', {
+        key: 'ArrowDown',
+        force: true
+      });
+      cy.wait(1);
+    }
+    cy.findAllByRole('option').eq(98).should('be.visible');
+    cy.log('**And the last option is not visible**');
+    cy.findAllByRole('option').last().should('not.be.visible');
+    cy.log('**When the PageDown key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageDown',
+      force: true
+    });
+    cy.log('**Then the last option is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.all(() => cy.findAllByRole('option').last().invoke('get', 0), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref7 => {
+      let [lastOption, highlightedOption] = _ref7;
+      expect(highlightedOption).to.equal(lastOption);
+    });
+    cy.log('**And the last option is visible**');
+    cy.findAllByRole('option').last().should('be.visible');
+  });
+  it('should highlight the last enabled option',
+  // We don't want the options to scroll when we check whether they're
+  // visible or not (as that'd make them visible)
+  {
+    scrollBehavior: false
+  }, () => {
+    cy.log('**Given a select with 100 options is displayed and option #99 is disabled**');
+    cy.visitStory('Simple Single Select', 'Hundret Options With Disabled');
+    cy.log('**And the 3rd-last option is being selected**');
+    cy.findByRole('combobox').focus().type(`Select option 97`);
+    cy.log('**And the menu is visible**');
+    cy.findByRole('combobox').click();
+    cy.findByRole('option', {
+      selected: true
+    }).should('be.visible');
+    cy.log('**And the 3rd-last option is the last option on the current page**');
+    cy.all(() => cy.findAllByRole('option').eq(89), () => cy.findByRole('listbox').invoke('parent') // scrollable div
+    ).then(_ref8 => {
+      let [nextTopOption, listBoxParent] = _ref8;
+      const {
+        offsetTop
+      } = nextTopOption.get(0);
+      listBoxParent.get(0).scrollTop = offsetTop;
+    });
+    cy.findAllByRole('option').eq(97).should('be.visible');
+    cy.findAllByRole('option').eq(98).should('not.be.visible');
+    cy.findAllByRole('option').last().should('not.be.visible');
+    cy.log('**When the PageDown key is pressed**');
+    cy.findByRole('combobox').trigger('keydown', {
+      key: 'PageDown',
+      force: true
+    });
+    cy.log('**Then the last option is highlighted**');
+    // For some reason, it takes a little time to change the highlighted  option
+    cy.wait(1);
+    cy.all(() => cy.findAllByRole('option').invoke('get', 98), () => cy.findByRole('option', {
+      selected: true
+    }).invoke('get', 0)).then(_ref9 => {
+      let [secondLastOption, highlightedOption] = _ref9;
+      expect(highlightedOption).to.equal(secondLastOption);
+    });
+    cy.log('**And the second last option is visible**');
+    cy.findAllByRole('option').eq(98).should('be.visible');
+    cy.log('**And the last option is not visible**');
+    cy.findAllByRole('option').eq(99).should('not.be.visible');
+  });
+});

package/build/es/simple-single-select/features/menu-positioning.test.e2e.js

@@ -0,0 +1,150 @@
+describe('SimpleSingleSelect: Menu positioning', () => {
+  it('should open in the default position', () => {
+    // Given there is enough space below the anchor to fit the SingleSelect menu
+    cy.visitStory('Simple Single Select', 'Default position');
+
+    // When the SingleSelect is clicked
+    cy.findByRole('combobox').click();
+
+    // Then the top of the menu is aligned with the bottom of the input
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref => {
+      let [selectedValue, menu] = _ref;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+
+      // The listbox is inside a container with a border,
+      // hence the increased delta
+      expect(menuRect.top).to.be.closeTo(selectedValueRect.bottom, 2);
+    });
+
+    // And the left of the SingleSelect is aligned with the left of the anchor
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref2 => {
+      let [selectedValue, menu] = _ref2;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+
+      // The listbox is inside a container with a border,
+      // hence the increased delta
+      expect(selectedValueRect.left).to.be.closeTo(menuRect.left, 2);
+    });
+  });
+  it('should flipp the position when insufficient space below', () => {
+    // Given there is not enough space below the anchor to fit the SingleSelect menu
+    cy.visitStory('Simple Single Select', 'Flipped position');
+
+    // When the SingleSelect is clicked
+    cy.findByRole('combobox').click();
+
+    // Then the bottom of the menu is aligned with the top of the input
+    cy.all(() => cy.findByRole('combobox'),
+    // We need to get the parent as the menu itself
+    // extends withing the div container
+    () => cy.findByRole('listbox').invoke('parent')).should(_ref3 => {
+      let [selectedValue, menu] = _ref3;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+      expect(selectedValueRect.top).to.be.closeTo(menuRect.bottom, 2);
+    });
+
+    // And the left of the SingleSelect is aligned with the left of the anchor
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref4 => {
+      let [selectedValue, menu] = _ref4;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+
+      // The listbox is inside a container with a border,
+      // hence the increased delta
+      expect(selectedValueRect.left).to.be.closeTo(menuRect.left, 2);
+    });
+  });
+  it('should shift the menu into view when insufficient space below and above', () => {
+    // Given there is not enough space above or below the anchor to fit the SingleSelect menu
+    cy.visitStory('Simple Single Select', 'Shifted into view');
+
+    // When the SingleSelect is clicked
+    cy.findByRole('combobox').click();
+
+    // Then it is rendered on top of the SingleSelect
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref5 => {
+      let [selectedValue, menu] = _ref5;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+      expect(selectedValueRect.top).to.be.greaterThan(menuRect.top);
+      expect(menuRect.bottom).to.be.greaterThan(selectedValueRect.bottom);
+    });
+
+    // And the left of the SingleSelect is aligned with the left of the anchor
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref6 => {
+      let [selectedValue, menu] = _ref6;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+      expect(selectedValueRect.top).to.be.greaterThan(menuRect.top);
+      expect(menuRect.bottom).to.be.greaterThan(selectedValueRect.bottom);
+    });
+  });
+  it('should keep the menu in position while the window is scrolled', () => {
+    // Given there is enough space below the anchor to fit the SingleSelect menu
+    cy.visitStory('Simple Single Select', 'Default position');
+
+    // When the SingleSelect is clicked
+    cy.findByRole('combobox').click();
+
+    // And the window is scrolled down
+    cy.get('body').then($body => $body.height('5000px')); // Ensure the body can scroll first
+    cy.scrollTo(0, 800);
+
+    // Then the top of the menu is aligned with the bottom of the input
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref7 => {
+      let [selectedValue, menu] = _ref7;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+
+      // The listbox is inside a container with a border,
+      // hence the increased delta
+      expect(menuRect.top).to.be.closeTo(selectedValueRect.bottom, 2);
+    });
+
+    // And the left of the SingleSelect is aligned with the left of the anchor
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref8 => {
+      let [selectedValue, menu] = _ref8;
+      expect(selectedValue.length).to.equal(1);
+      expect(menu.length).to.equal(1);
+      const $selectedValue = selectedValue[0];
+      const $menu = menu[0];
+      const selectedValueRect = $selectedValue.getBoundingClientRect();
+      const menuRect = $menu.getBoundingClientRect();
+
+      // The listbox is inside a container with a border,
+      // hence the increased delta
+      expect(selectedValueRect.left).to.be.closeTo(menuRect.left, 2);
+    });
+  });
+});

package/build/es/simple-single-select/index.js

@@ -0,0 +1,2 @@
+export { optionProp } from './shared-prop-types.js';
+export { SimpleSingleSelect } from './simple-single-select.js';

package/build/es/simple-single-select/is-option-hidden.js

@@ -0,0 +1,16 @@
+// If this many pixels are invisible, we still consider the option visible
+// The reason we're doing this is because of JS' number issues,
+// e.g:
+//      optionOffsetBottom is 345.6000061035156
+//      containerOffsetBottom is 345.5999984741211
+//      -> Without tolerance, option is invisible
+const TOLERANCE = 2;
+export function isOptionHidden(option, scrollContainer) {
+  const optionOffsetTop = option.getBoundingClientRect().top;
+  const optionHeight = option.offsetHeight;
+  const optionOffsetBottom = optionOffsetTop + optionHeight;
+  const containerOffsetTop = scrollContainer.getBoundingClientRect().top;
+  const containerHeight = scrollContainer.offsetHeight;
+  const containerOffsetBottom = containerOffsetTop + containerHeight;
+  return optionOffsetBottom > containerOffsetBottom + TOLERANCE || optionOffsetTop < containerOffsetTop - TOLERANCE;
+}

package/build/es/simple-single-select/menu/empty.js

@@ -0,0 +1,19 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers, theme } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+const Empty = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3788156646",
+    dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
+};
+Empty.propTypes = {
+  children: PropTypes.string.isRequired
+};
+export { Empty };