Checkout/customer-account extension component ScrollView not scrollable in Safari with external mouse (not trackpad)

[mikefortney]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.4.1", "@shopify/ui-extensions-react": "2024.4.1"

Describe the bug

When using the checkout/customer-account component ScrollView, in the Safari desktop browser, with a mouse (not a trackpad), the mouse is unable to reach the scrollbar at all. It disappears as you move the mouse towards it. I have included a series of ToggleButtons inside the ScrollView to create a horizontal carousel of options to choose.

Here is an example of the code:

<View maxInlineSize='100%'>
  <ToggleButtonGroup
    value={selectedCause.id.toString()}
    onChange={handleCauseSelection}
  >
    <ScrollView
      direction='inline'
      hint='innerShadow'
      padding={['none', 'none', 'base', 'loose']}
    >
      <InlineLayout spacing='base' columns={200}>
        {renderCauses(widgetData?.impactAreas || [])}
        <InlineSpacer spacing='extraTight' />
      </InlineLayout>
    </ScrollView>
  </ToggleButtonGroup>
</View>

and here is the renderCauses method that renders the actual ToggleButtons

function renderCauses(causes: ImpactArea[]) {
  return causes.map(cause => (
    <ToggleButton id={cause.id.toString()} key={cause.id.toString()}>
      <View padding={['none', 'loose']}>
        <BlockStack spacing='tight'>
          <Img
            loading='lazy'
            source={cause.charityCarouselImgUrl}
            accessibilityDescription=''
            borderRadius='base'
          />
          <TextBlock emphasis='bold' inlineAlignment='center'>
            {cause.name}
          </TextBlock>
          <TextBlock size='small' appearance='subdued' inlineAlignment='center'>
            w/ {cause.charityName}
          </TextBlock>
        </BlockStack>
      </View>
    </ToggleButton>
  ));
}

Steps to reproduce the behavior:

1. Create a checkout extension following the guide.
2. Use the code above to create the carousel (assigning dummy data where needed)
3. Open the extension preview on a Mac in the Safari desktop browser
4. Attempt to scroll the horizontal carousel

Expected behavior

The mouse should be able to hover over the scroll bar and use it to scroll the carousel.

Screenshots

https://github.com/Shopify/ui-extensions/assets/972192/bd1453db-7bd0-434d-a873-d0cda18a3ec0

Additional context

I thought the issue could be because I added padding to the bottom of the container to separate the scroll bar from the bottom of the ToggleButtons a little bit visually, but when I removed that padding the issue still occurs.

[jun-shop]

Thank you for the detailed repro steps. I was able to repro on my test shop (I even tried altering the markup such that the ToggleButtonGroup was nested inside the ScrollView but that didn't do anything) so I've filed a ticket and we'll take a look at it as soon as we can

[mikefortney]

Thank you for looking into this so quickly @jun-shop!

[mikefortney]

Hello @jun-shop has there been any update on this? The ScrollView component, used horizontally, is unusable for mouse users. It only works for trackpad and mobile users.

[jun-shop]

👋 Hi @mikefortney unfortunately no updates yet. it's being investigated

[mikefortney]

@jun-shop it's been another few weeks, and the issue still exists. Any updates?

[nikijiandani]

@mikefortney we shipped a fix for this yesterday. Can you confirm that this is now resolved and close the issue?

[mikefortney]

@nikijiandani apologies for the delay, I was out of town... The fix works! Thank you very much!