[BUG] Tile component badge cannot be hidden once shown

Extensions
1

Hi! I’ve built a POS UI extension using the React components, and have found what seems to be unexpected behaviour with the Tile component’s badgeValue prop (ref).

Reproduction steps:

  1. Have a Tile instance whose badgeValue prop is undefined – no badge is shown on the tile, as expected;
  2. Change the badgeValue prop to a number – the badge is shown on the tile, as expected;
  3. Change badgeValue back to undefined – we’d expect the badge to be hidden again, but it remains visible :bug:

Minimal reproduction:

import { Tile } from '@shopify/ui-extensions-react/point-of-sale';
import { useState } from 'react';

let count = 1;

export function TileTest() {
  const [pressCount, setPressCount] = useState<number | undefined>(undefined);
  return (
    <Tile
      enabled
      title="Badge test"
      badgeValue={pressCount}
      onPress={() => {
        setPressCount(typeof pressCount === 'undefined' ? count++ : undefined);
      }}
    />
  );
}

Our POS functionality depends on being able to hide the badge again under certain conditions (e.g. customer is removed from the cart), but the UI just doesn’t update to reflect that change even when we update the value we’re passing in.

Thanks for taking a look!

Editing to add a demo recorded using the above code to make the behaviour easier to visualise.

3

Hi Andy,

Starting with POS 9.26, you will be able to pass null from the extension and POS will hide the badge. Thank you for the report!

4

Hi @Nathan_Oliveira! Thanks for the quick response. I was going to say, null isn’t currently an accepted type for badgeValue.

Starting with POS 9.26

I might be missing something here but how can I find out which version of POS UI extensions would relate to the POS 9.26 release? I can see that the extensions versions mention which POS version they were added in, but haven’t found anything mapping the other way. It’d be helpful to know so I can understand which extensions version I’ll need to update to to fix this issue. Thanks!

5

We do not currently track all changes related to UI Extensions as they map to versions of POS.

When we originally designed the data model for POS UI extensions, we made an assumption that an explicit undefined would traverse the transport layer between extensions and the host, but it does not. So typically where you see optional props that show a UI element, try null to hide it. In this particular case, the component in POS that the badgeValue maps to was not expecting null. I changed the POS to expect null and to treat it like undefined for this case.

1 Like
6

Hi @Nathan_Oliveira. I’ve just updated my POS app version to 9.26.2, and have specified using 2025.1.0 of both @shopify/ui-extensions and @shopify/ui-extensions-react. However, I still see this bug persist, and when I look at the type of the badgeValue in the ui-extensions package, it still just has badgeValue?: number – meaning that we still can’t pass null. I’ve also tried passing null as any (which is dirty but gets around the type issue), and still see that the badge remains visible after changing the prop’s value to null.

Am I on the wrong version of something, or am I missing something? Or is the bugfix just not released yet? Thanks!

Edit to add: I saw there’s a 2025.1.3 package release that was made today, but the issue persists there too.

7

@Nathan_Oliveira is there any update here? It’s been 3 weeks since my last message here about the expected fix not actually fixing the issue. We have a workaround in place for now (i.e. just. avoiding ever showing the home tile’s badge), but it’d be great if we could start using the badge as we’d anticipated being able to :pray:

8

@Nathan_Oliveira sorry to be a nuisance about this but it’s been 3 weeks since I last asked for an update here and there’s still been no response (and another 3 weeks before that since I first asked for an update). Is there any news here?