Icon button with InputBase - css

Question

I'm a newbie to MUI/react and I've been trying to place an Icon button beside my input base form, however I'm struggling to make it so that the input form consumes all the available space in my search div. Instead my search icon wrapper is the one that takes majority of the space. I'm really confused what I'm doing wrong, Can someone please shed some light on me?
Here's my code:
import * as React from "react";
import { styled } from "#mui/material/styles";
import Box from "#mui/material/Box";
import InputBase from "#mui/material/InputBase";
import SearchIcon from "#mui/icons-material/Search";
import IconButton from "#mui/material/IconButton";
const Search = styled("div")(({ theme }) => ({
display: "flex",
position: "relative",
borderRadius: 30,
backgroundColor: "#ffffff",
border: "1px",
borderStyle: "solid",
borderColor: "#55597d",
// marginLeft: 10,
width: "auto",
".MuiInputBase-root": {
width: "100%",
},
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
// position: 'absolute',
// pointerEvents: 'none',
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
// backgroundColor: 'black',
width: "100%",
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "inherit",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(0)})`,
paddingRight: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
},
}));
export default function SearchAppBar({
searchQuery,
setSearchQuery,
clearGenre,
onDropDownChange,
}) {
return (
<Box sx={{ flexGrow: 1 }}>
<Search
sx={{
width: { xs: "90vw", md: "50vw", lg: "30vw" },
margin: "auto",
marginBottom: "20px",
}}
>
<form action="/" method="get">
<StyledInputBase
defaultValue={searchQuery}
// placeholder="Search All Games…"
inputProps={{ "aria-label": "search" }}
type="search"
name="s"
id="site-search"
/>
</form>
<SearchIconWrapper>
<IconButton>
<SearchIcon style={{ color: "#55597d" }} />
</IconButton>
</SearchIconWrapper>
</Search>
</Box>
);
}

Answer 1

You need to remove the width: 100% in the SearchIconWrapper on the right first. And because the Search component is a flex container, you also need to add flexGrow: 1 to the first child (the form) so it can expand to fit the parent and push the icon to the far right:
const Search = styled("div")(({ theme }) => ({
display: "flex",
position: "relative",
borderRadius: 30,
backgroundColor: "#ffffff",
border: "1px",
borderStyle: "solid",
borderColor: "#55597d",
// marginLeft: 10,
// ---------------------------------- add the following styles
"& :first-child": {
flexGrow: 1
}
width: "auto",
".MuiInputBase-root": {
width: "100%"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
// position: 'absolute',
// pointerEvents: 'none',
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
// backgroundColor: 'black',
// -----------------------------------> comment this line: width: "100%"
}));