Issue with SearchBar Clear Button in @shopify/ui-extensions-react/point-of-sale

Extensions
1

Hi Shopify POS team :wave:,

I’m currently using the SearchBar component from @shopify/ui-extensions-react/point-of-sale, and I’ve noticed that when the input is not empty, an (x) clear button appears, but clicking this button does not trigger either the onSearch or onTextChange callbacks.

I believe this is a bug. It would be helpful if either:

  • onTextChange is called with an empty string when the input is cleared, or
  • an onClear callback is introduced to handle this specific action.

Could you please look into this?

2

Hey @Gabriela_Seabra :waving_hand: Thanks for reaching out and flagging this. You’re right that this behavior seems a bit inconsistent, the clear button should definitely trigger a callback to let your app know the search has been cleared.

Would you be able to share which version of @shopify/ui-extensions-react/point-of-sale are you using, the version of the Shopify POS app are you testing with and a short example of how you’re implementing the SearchBar? Something like:

<SearchBar
  initialValue=""
  placeholder="Search products..."
  onTextChange={(value) => {
    console.log('onTextChange:', value);
    // Your state update logic
  }}
  onSearch={(value) => {
    console.log('onSearch:', value);
    // Your search logic
  }}
  onFocus={() => {
    console.log('SearchBar focused');
  }}
/>

If you’re willing to share a screen recording, that would be super helpful too - hope to hear from you soon, we’ll get this looked into!

3

Hey Alan. I am using @shopify/ui-extensions-react 2025.4.0. This is the component where I have the SearchBar, I added some logs and recorded a video using it (note: I’m using the x button to clear the text):

function ControlledSearchBar({
  value,
  onChange,
  placeholder,
  disabled,
}: {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
}) {
  // we track the true value of the search bar here,
  // allowing us to re-mount it when it diverges from the value prop
  const [internalValue, setInternalValue] = useState(value);
  const [key, setKey] = useState(0);

  useEffect(() => {
    if (value !== internalValue) {
      setInternalValue(value);
      setKey(key + 1);
    }
  }, [value]);

  const { toast } = useApi<'pos.home.modal.render'>();

  return (
    <Box blockSize={getPosInputHeight(1)}>
      <Stack flex={1} flexChildren direction="inline" alignItems="center" alignContent="center">
        <SearchBar
          key={key}
          editable={!disabled}
          initialValue={internalValue}
          placeholder={placeholder}
          onSearch={value => {
            toast.show(`onSearch: ${value}`);
          }}
          onTextChange={value => {
            setInternalValue(value);
            onChange(value);
            toast.show(`onTextChange: ${value}`);
          }}
          onFocus={() => {
            toast.show(`onFocus`);
          }}
        />
      </Stack>
    </Box>
  );
}

ScreenRecording_07-01-2025 13-59-13_1.MP4 [video-to-gif output image]

4

Thanks @Gabriela_Seabra - I’ll do some further digging into this internally and get back in touch with you once I have an answer or next steps, really appreciate you sending this my way :slight_smile:

5

Hi @Gabriela_Seabra - I believe I was able to replicate what you’re seeing. Just want to make sure I’ve set things up correctly on my end. Here’s a quick video of my set up:

And here’s my extension snippet (based on the one you shared):

import React, { useState, useEffect } from 'react';
import {
  Box,
  Stack,
  SearchBar,
  useApi,
} from '@shopify/ui-extensions-react/point-of-sale';
}

function ControlledSearchBar({
  value,
  onChange,
  placeholder,
  disabled,
}: {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
}) {
  const [internalValue, setInternalValue] = useState(value);
  const [key, setKey] = useState(0);

  useEffect(() => {
    if (value !== internalValue) {
      setInternalValue(value);
      setKey(key + 1);
    }
  }, [value]);

  const { toast } = useApi<'pos.home.modal.render'>();

  return (
    <Box blockSize={`${getPosInputHeight(1)}px`}>
      <SearchBar
        key={key}
        editable={disabled ? false : true}
        initialValue={internalValue}
        placeholder={placeholder}
        onSearch={value => {
          toast.show(`onSearch: ${value}`);
        }}
        onTextChange={value => {
          setInternalValue(value);
          onChange(value);
          toast.show(`onTextChange: ${value}`);
        }}
        onFocus={() => {
          toast.show(`onFocus`);
        }}
      />
    </Box>
  );
}

export default ControlledSearchBar;

Just wanted to make sure I was replicating things correctly before I reach out to the team on my end here. Essentially, the issue is that onTextChange and onSearch don’t seem to be triggered? It looks like that’s what I’m seeing on my end here too, but just wanted to confirm I’m understanding things correctly - hope to hear from you soon!