All committers have signed the CLA.

The issue can be solved by explicitly setting indexAttributeName: 'data-index' in Combobox.tsx.

  const virtualizerOptions = {
    count: items.length,
    getScrollElement: () => floatingRef.current,
    estimateSize,
    overscan: 4,
    indexAttributeName: 'data-index',
  };

The issue can be solved by explicitly setting indexAttributeName: 'data-index' in Combobox.tsx.

  const virtualizerOptions = {
    count: items.length,
    getScrollElement: () => floatingRef.current,
    estimateSize,
    overscan: 4,
    indexAttributeName: 'data-index',
  };

I tried this in combination with the mocking, issue remained.

The issue can be solved by explicitly setting indexAttributeName: 'data-index' in Combobox.tsx.

  const virtualizerOptions = {
    count: items.length,
    getScrollElement: () => floatingRef.current,
    estimateSize,
    overscan: 4,
    indexAttributeName: 'data-index',
  };

I tried this in combination with the mocking, issue remained.

Interesting. That's the only change I did to the current state of the pull request, and now there is only one failing test:

 FAIL  packages/grafana-ui/src/components/Combobox/Combobox.test.tsx
  ● Combobox › should allow selecting a value by clicking directly

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      43 |         const item = await screen.findByRole('option', { name: 'Option 1' });
      44 |         userEvent.click(item);
    > 45 |         expect(onChangeHandler).toHaveBeenCalled();
         |                                 ^
      46 |     });
      47 |
      48 |     it('selects value by using keyboard only', async () => {

      at packages/grafana-ui/src/components/Combobox/Combobox.test.tsx:45:33
      at fulfilled (node_modules/tslib/tslib.js:166:62)

But no error like the previous one.

The issue can be solved by explicitly setting indexAttributeName: 'data-index' in Combobox.tsx.

  const virtualizerOptions = {
    count: items.length,
    getScrollElement: () => floatingRef.current,
    estimateSize,
    overscan: 4,
    indexAttributeName: 'data-index',
  };

I tried this in combination with the mocking, issue remained.

Interesting. That's the only change I did to the current state of the pull request, and now there is only one failing test:

 FAIL  packages/grafana-ui/src/components/Combobox/Combobox.test.tsx
  ● Combobox › should allow selecting a value by clicking directly

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      43 |         const item = await screen.findByRole('option', { name: 'Option 1' });
      44 |         userEvent.click(item);
    > 45 |         expect(onChangeHandler).toHaveBeenCalled();
         |                                 ^
      46 |     });
      47 |
      48 |     it('selects value by using keyboard only', async () => {

      at packages/grafana-ui/src/components/Combobox/Combobox.test.tsx:45:33
      at fulfilled (node_modules/tslib/tslib.js:166:62)

But no error like the previous one.

Is it exactly like this ?

I am sorry @KawtharAlakri , I had accidentally added the changes on top of another branch (#92284) I was working on. Disregard what I mentioned previously. Also, it should've been indexAttribute, I have no idea why that worked for me. I have now merged it into main, maybe you can merge main into your branch?

@tskarhed I couldn't fix the test case where clicking on item should select it, clicking is not triggering the onChange function, so I commented and updated other test cases. This PR is ready to be reviewed.

Thank you! Could you also sign the Contributor License Agreement?

Thank you! Could you also sign the Contributor License Agreement?

Done