Shopify/polaris

ChoiceList in a BlockStack renders an empty space below it in Safari

Opened this issue · 0 comments

Summary

When viewing our form in Safari we noticed a large gap below a ChoiceList component. It seems to only happen when the ChoiceList is rendered as a direct child in a BlockStack. Also, once the component rerenders, the gap disappears.

ex: (this will have a gap below ChoiceList)

<BlockStack>
  <ChoiceList />
</BlockStack>

It does not matter where in the BlockStack it is rendered. But if the ChoiceList is is wrapped in another component, there is no gap.

ex: (this will have no gap)

<BlockStack>
  <div>
    <ChoiceList />
  </div>
</BlocKStack>

Expected behavior

No gap is displayed a ChoiceList

Actual behavior

02-02-q8irg-imtgc
Component in Admin

https://screenshot.click/02-33-qozmb-xunb1.mp4

Are you using React components?

Yes

Polaris version number

13.23.0

Browser

Safari

Device

Desktop