Unable to horizontally scroll when there's only one row in the grid unless I hover over the row

[mileniasm]

I'm submitting a ... (check one with "x")

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Providing a Reproducible Scenario

1. Given a grid with a set width: calc(100vw - 140px) and height: calc(100vh - 310px), when there is only one row and a lot of columns, requiring the user to scroll horizontally (but not vertically), the user is able to scroll horizontally only when they hover over the row.
2. Trying to scroll horizontally with the mouse wheel or using an Apple mouse does not work if you are not hovering over the row.
3. The horizontal scroll bar on the bottom of the grid does not show, therefore the user cannot drag it to scroll to the right.

Current behavior
When there is only one row in the grid and the grid has a set height and width, the horizontal scroll works only if you hover over the row, not below it where the remainder of the viewport is.

Expected behavior
The grid should be horizontally scrollable when there is a set width and the viewport exceeds that width.

Please tell us about your environment:
Currently using version 30.2.0 and yarn package manager. This is observed in an Angular application, in Chrome and Firefox, have not tested other browsers.

I was able to reproduce this on my local machine (Macbook) using VS Code, but this is the behavior when the applications is deployed too.

• AG Grid version:
  30.2.0

• Browser:
  Chrome (123.0.6312.87) and Firexox (124.0.1)

• Language: [Angular 16 / TypeScript 4.9.5]

[AG-Zoheil]

Hi @mileniasm,

Thank you for reporting this.

We'd be happy to look into this, but the most efficient way for us to do so would be for you to provide a live example reproducing the issue.

Please send us a live plunker sample which shows the issue. You can use one of the examples from our website as a starting point. Do let us know if you need further guidance on this.

We're looking forward to your response.

Kind regards,
Zoheil

[mileniasm]

Hi @AG-Zoheil,

I tried creating a live example in Plunker for you but I could not find ag-grid-angular library to add it to my project there - https://run.plnkr.co/preview/clvftkpaw000l2e6mc2v6iuxs/. I tried using the functionality to Add and Insert a Project...

I also tried creating an example in stackblitz but could not get it to load there at all - https://stackblitzstarters4idjqh-k3bp--4200--41fbae16.local-corp.webcontainer.io

But what I noticed is that this only happens when I use my Apple mouse (magic mouse?). I am currently using a Logitech mouse (M720 Triathlon), and the horizontal scroll in the grid disappears immediately after I turn on my Apple mouse.

Other people who are using just their Macbook touchpads are saying they are also observing it. This might be an issue specifically for Apple devices.

I will keep trying to provide a live example for you.

[mileniasm]

Correction, turning on the Apple mouse makes the scrollbar disappear, and once that happens even when I turn off the Apple mouse and start using my Logitech mouse again, it does not scroll unless you hover over the row.

[AG-Zoheil]

Hi @mileniasm,

Thank you for your comments. We have attempted to reproduce the issue and can see it working as expected in v31.2.1.
Please see the following plunker: https://plnkr.co/edit/uQpumqnaawZFFaUY?preview

If you are still having issues, please upgrade to the latest version.

Thank you!