Remove/replace searchIcon button in ChannelListHeader

Hello, I am trying to get rid of the searchIcon button in the ChannelListHeader. As I understand it, I can pass in a custom component into the renderIconButton.
rednerIconButton={()=> }
When I do this, my button appears on top of the default serachIcon button instead of replacing it. Am I missing something?

// What version of the SDK are you using?
@sendbird/uikit-react”: “^3.2.6”,

[Reproduction Steps]

<ChannelListProvider>
  <ChannelListUI
    queries={queries}
    isTypingIndicatorEnabled={true}
    onChannelSelect={(e) => setCurrentChannel(e.url)}
    renderHeader={() => (
      <ChannelListHeader
        renderHeader={() => <div>Channels</div>}
        renderIconButton={() => <Button><AddCommentIcon /></div>}
      />
    )}
  />
</ChannelListProvider>

// How is this currently impacting your implementation?
In our current implementation, we don’t want certain people to be searchable so we have implemented our own API to search for users. I want to attach our own modal to the button for searching users.

@Alex_Maldonado Hello.
Can I know the exact contents of the code below?

Hi @Yongjun_Choi This is the entire component.
The Button and AddCommentIcon are components from the Material Ui Library.

I changed the code slightly from the example above. For some reason the example above it not working properly so I switched the ChannelListUI out for the ChannelList component. But the same issue is happening with the searchIcon button.

Bellow the code I have attached an image of what the button looks like.

const Chat = () => {
  const [session, loading] = useSession();
  const dispatch = useDispatch();
  const darkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const [showSettings, setShowSettings] = useState(false);
  const [openSearch, setOpenSearch] = useState(false);
  const { chatOpen, sendbirdAccessToken, sendbirdUserId } = useSelector(
    (store) => store.chat
  );

  const [currentChannel, setCurrentChannel] = useState(null);

  const [queries] = useState({
    channelListQuery: {
      includeEmpty: true,
      limit: 50,
      order: 'chronological',
    },
    applicationUserListQuery: {
      limit: 50,
    },
  });

  const theme = darkMode ? 'dark' : 'light';

  if (!loading && !session) return <Unauthorized />;

  const logout = () => {
    dispatch(sendbirdLogout());
  };

  if (!chatOpen) {
    return <Login />;
  }

  return (
    <Page>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          padding: '10px',
        }}
      >
        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
          <Typography variant="h4">Sandals Church Chat</Typography>
        </Box>
        <Button onClick={logout} color="error">
          Sign Out
        </Button>
      </Box>
      <Box
        sx={{
          display: 'flex',
          height: '70vh',
          position: 'relative',
          backgroundColor: 'red',
        }}
      >
        <SendbirdProvider
          theme={theme}
          appId={sendbirdappId}
          userId={sendbirdUserId}
          accessToken={sendbirdAccessToken}
          allowProfileEdit={false}
        >
          <Box sx={{ display: 'flex', width: '100%' }}>
            <Box>
              <ChannelListProvider>
                <ChannelList
                  queries={queries}
                  isTypingIndicatorEnabled={true}
                  onChannelSelect={(e) => setCurrentChannel(e.url)}
                  renderHeader={() => (
                    <ChannelListHeader
                      renderIconButton={() => (
                        <Button color="blue">
                          <AddCommentIcon />
                        </Button>
                      )}
                    />
                  )}
                />
              </ChannelListProvider>
            </Box>
            <Box sx={{ flexGrow: 1 }}>
              <Channel
                channelUrl={currentChannel}
                onChatHeaderActionClick={() => {
                  setShowSettings(true);
                }}
              />
            </Box>
            {showSettings && (
              <Box>
                <ChannelSettings
                  channelUrl={currentChannel}
                  onCloseClick={() => {
                    setShowSettings(false);
                  }}
                />
              </Box>
            )}
          </Box>
        </SendbirdProvider>
      </Box>
    </Page>
  );
};
export default Chat;

Screen Shot 2022-11-29 at 10.23.36 PM

@Alex_Maldonado Hi, you mean add channel button right?
I am checking it with the UIKit engineer and will get back to here again.
thanks.

@Yongjun_Choi correct. I would like to add my own channel button to handle a different function. Thank you!

@Alex_Maldonado
The development team will modify it and distribute it to the next release version.
Then you will be able to change the button.
Please wait a little bit.
Thanks.

1 Like

@Yongjun_Choi This is amazing! I currently have a workout around in the mean time but I look forward to the update. Thank you so much!

@Alex_Maldonado
UIKit React v3.3.2 has been released, please check with this version.
thanks.

Just tried it out. This works great. Thank you so much for the speedy release!

how do i add search for channel