Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the current Tab is set to Tab1!
To illustrate this problem, I recreated it in this CodeSandBox. The corresponding code is also provided below.
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import TextField from "@material-ui/core/TextField";
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`scrollable-force-tabpanel-${index}`}
aria-labelledby={`scrollable-force-tab-${index}`}
{...other}
>
<Box p={1}>{children}</Box>
</Typography>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired
};
function a11yProps(index) {
return {
id: `scrollable-force-tab-${index}`,
"aria-controls": `scrollable-force-tabpanel-${index}`
};
}
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper,
padding: 0,
margin: 0
},
Tab: {
MuiTab: {
root: {
minWidth: "130px"
}
}
}
}));
export default function Demo(props) {
const classes = useStyles();
const [value, setValue] = React.useState(0);
function handleChange(event, newValue) {
setValue(newValue);
console.log(newValue);
}
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
key={"tabs"}
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
aria-label="scrollable force tabs example"
>
<Tab
key={"tab1"}
className={classes.Tab}
label={0}
{...a11yProps(0)}
/>
<Tab
key={"tab2"}
className={classes.Tab}
label={1}
{...a11yProps(1)}
/>
</Tabs>
</AppBar>
<TabPanel
key={"panel1"}
value={value}
index={0}
style={{ padding: 0, margin: 0 }}
>
<div key={"div1"}>
hi im tab1{" "}
<TextField
key={"textfield1"}
variant={"outlined"}
margin={"dense"}
label={"im tab 0 textfield"}
/>
</div>
</TabPanel>
<TabPanel
key={"panel2"}
value={value}
index={1}
style={{ padding: 0, margin: 0 }}
>
<div key={"div2"}>
hi im tab2
<TextField
key={"textfield2"}
variant={"outlined"}
margin={"dense"}
label={"im tab 1 textfield"}
/>
</div>
</TabPanel>
</div>
);
}
Edit1:
A similar question was found...,
Material-UI TextField Outline Label is overlapping with border when conditionally rendered
It appears that this issue is not specific to tabs but rather influenced by conditional rendering, which became apparent while working with tabs
Edit2:
Despite assigning a key to the Textfield, the problem persists with an overlap between the Textfield border and label. The sandbox has been updated to reflect this change