Search component's button unmounts unexpectedly

[przytrzask]

Problem

In a search component we have following conditional rendering

{withRoundButton ? (
        <div className={`${baseClassName}__icon`}>
          <Button
            variant="solid"
            className={cx({
              'sg-search-button--s': size === 's',
            })}
            icon={
              <Icon
                type="search"
                size={size === 'l' ? 24 : 16}
                color="adaptive"
              />
            }
            iconOnly
            size={size === 'l' ? 'm' : 's'}
          />
        </div>
      ) : (
        <button className={`${baseClassName}__icon`}>
          <Icon
            type="search"
            color={ICON_COLOR['icon-gray-50']}
            size={size === 'l' ? 24 : 16}
          />
        </button>
      )}

and since we use this component based on whether it is focused or not like this

turn (
    <Search
      withRoundButton={focused}

then because blur happens first, the button unmounts next submit is never called

Proposed solution

I think it will be rather easy to style this button using classes only instead of conditional rendering

[coderitual]

Hey @przytrzask , feel free to use pseudo elements / switchable wrappers to avoid conditional rendering and keep things on css level only.

[przytrzask]

Ok I will create a proposal PR with it

[katarzynatobis]

@przytrzask is this issue in progress or can I take it over?