relative width not working while animating div collapse using MUI's transition API

I have an input bar that can collapse and expand on onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely.
<ButtonGroup
sx={{
justifyContent: 'flex-end',
alignItems: 'center',
}}
>
<Collapse
in={searchFieldVisible}
timeout={{ enter: 1000, exit: 1000 }}
orientation='horizontal'
>
<TextField/>
</Collapse>

<IconButton onClick={() => setSearchFieldVisible(p => !p)}>
<SearchIcon />
</IconButton>

</ButtonGroup>
<ButtonGroup
sx={{
justifyContent: 'flex-end',
alignItems: 'center',
}}
>
<Collapse
in={searchFieldVisible}
timeout={{ enter: 1000, exit: 1000 }}
orientation='horizontal'
>
<TextField/>
</Collapse>

<IconButton onClick={() => setSearchFieldVisible(p => !p)}>
<SearchIcon />
</IconButton>

</ButtonGroup>

I am using MUI's transition API . If I set width: '200px' on the <TextFied sx={{ width: '200px' }} /> it works, however, setting relative width doesn't work i.e. <TextField sx={{ width: '80%' }} />
2 Replies
clevermissfox
clevermissfox11mo ago
I’m not familiar with the MUI api, is there a timing function on your transition like ease-in?
MarkBoots
MarkBoots11mo ago
I think it is because it's not possible to transition between width: 0 and width: auto. (a percentage doesnt do anything on an inline element) I don't know mui, but i think the only way is to set a fixed width. (or maybe try setting a max-width which is larger than expected)
Want results from more Discord servers?
Add your server