Material-ui: React material border still showing under label on focus for outlined variant

[johnpittman]

Outlined textfield not focused

Outlined textfield focused

<TextField
    id="full_name"
    label="Full Name"
    margin="dense"
    autoComplete="new-password"
    value={leadPayload.full_name}
    onChange={this.handleChange}
 />

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Steps to Reproduce

Link:

1.
2.
3.
4.

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | "@material-ui/core": "^3.2.2" |
| React | "react": "^16.5.2" |
| Browser | Chrome |
| TypeScript | |
| etc. | |

[eps1lon]

Duplicate of #13264

[johnpittman]

This is not a duplicate of #13264 other because the label looks fine when the outlined textfield is not focused.

[eps1lon]

Maybe not. I suspect it is the same underlying issue. I'll reopen it but this issue is still missing a reproduction (your snippet is not even using outline)

[oliviertassinari]

@johnpittman I have already seen this issue from time-to-time. It's a Chrome rendering artifact: https://github.com/mui-org/material-ui/issues/12994#issuecomment-425676990.

[oliviertassinari]

Here is the orignal svg implementation cc @enagy27:

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '../styles';

export const styles = theme => {
  const light = theme.palette.type === 'light';

  return {
    /* Styles applied to the root element. */
    root: {
      // Raise the outline above yellow background on webkit autofill
      zIndex: 1,
      pointerEvents: 'none',
      position: 'absolute',
      top: '0px',
      left: '0px',
    },
    /* Styles applied to the svg path element. */
    path: {
      width: '100%',
      height: '100%',
      stroke: light ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)',
      fill: 'none',

      // Match the Input Label
      transition: theme.transitions.create(['stroke', 'stroke-width', 'stroke-dashoffset'], {
        duration: theme.transitions.duration.shorter,
        easing: theme.transitions.easing.easeOut,
      }),
    },
    /* Styles applied to the svg path element if the form control is focused. */
    focused: {
      stroke: theme.palette.primary.main,
    },
    /* Styles applied to the svg path element if `error={true}` for the form control. */
    error: {
      stroke: theme.palette.error.main,
    },
    /* Styles applied to the svg path element if `disabled={true}` for the form control. */
    disabled: {
      stroke: theme.palette.action.disabled,
    },
    /* Styles applied to the svg path element if the mouse is over the form control. */
    hover: {
      '&:not($focused):not($disabled):not($error)': {
        stroke: theme.palette.text.primary,
      },
    },
    /* Styles applied to the svg path element if the `input` of the form control is a `select`. */
    select: {
      '&$focused': {
        fill: light ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
      },
    },
  };
};

const getLeadingStroke = radius => Math.max(10 - radius, 0);

const getTrailingStroke = (width, radius, notchWidth, leadingStroke) =>
  width - 2 * radius - notchWidth - leadingStroke;

const getLeadingPath = (width, radius, notchWidth, inset, isRtl) => {
  const leadingStroke = getLeadingStroke(radius);

  const halfNotchWidth = notchWidth / 2;

  return !isRtl
    ? `M${radius + inset} ${inset} h${leadingStroke + halfNotchWidth}`
    : `M${width - radius + inset} ${inset} h${-leadingStroke - halfNotchWidth}`;
};

const getTrailingPath = (width, radius, notchWidth, inset, isRtl) => {
  const leadingStroke = getLeadingStroke(radius);
  const trailingStroke = getTrailingStroke(width, radius, notchWidth, leadingStroke);

  const halfNotchWidth = notchWidth / 2;

  return !isRtl
    ? `M${width - radius + inset} ${inset} h${-trailingStroke - halfNotchWidth}`
    : `M${radius + inset} ${inset} h${trailingStroke + halfNotchWidth}`;
};

const getPathBottom = (width, height, radius, inset) => {
  const bottomEdgeStroke = width - 2 * radius;
  const leftRightEdgeStroke = height - 2 * radius;

  return `M${width - radius + inset} ${inset}\
 a${radius} ${radius} 0 0 1 ${radius},${radius}\
 v${leftRightEdgeStroke}\
 a${radius},${radius} 0 0 1 ${-radius},${radius}\
 h${-bottomEdgeStroke}\
 a${radius},${radius} 0 0 1 ${-radius},${-radius}\
 v${-leftRightEdgeStroke}\
 a${radius},${radius} 0 0 1 ${radius},${-radius}`;
};

/**
 * An outline for form control elements which opens to fit a label.
 */
function NotchedOutline(
  {
    width: widthProp,
    height: heightProp,
    notched: notchedProp,
    notchWidth,
    className,
    classes,
    theme,
    select,
  },
  { muiFormControl },
) {
  const { focused, filled, adornedStart, error, disabled, hover } = muiFormControl;

  const radius = theme.shape.borderRadius;
  const isRtl = theme.direction === 'rtl';

  const notched = notchedProp || focused || filled || adornedStart;

  const strokeWidth = focused ? 2 : 1;
  const inset = strokeWidth / 2;

  const width = widthProp - strokeWidth;
  const height = heightProp - strokeWidth;

  const leadingStroke = getLeadingStroke(radius);
  const trailingStroke = getTrailingStroke(width, radius, notchWidth, leadingStroke);

  const halfNotchWidth = notchWidth / 2;

  // Note: `strokeDashoffset` must be positive. Sign will be
  // ignored in most browsers, including Safari
  const strokeDashoffset = notched ? halfNotchWidth : 0;

  const pathClassName = classNames(classes.path, {
    [classes.focused]: focused,
    [classes.error]: error,
    [classes.disabled]: disabled,
    [classes.hover]: hover,
    [classes.select]: select,
  });

  return (
    <svg
      x="0px"
      y="0px"
      width={widthProp}
      height={heightProp}
      viewBox={`0 0 ${widthProp} ${heightProp}`}
      className={classNames(classes.root, className)}
    >
      <path
        className={pathClassName}
        strokeWidth={strokeWidth}
        strokeDasharray={`${leadingStroke + halfNotchWidth} 10000`}
        strokeDashoffset={strokeDashoffset}
        d={getLeadingPath(width, radius, notchWidth, inset, isRtl)}
      />
      <path
        className={pathClassName}
        strokeWidth={strokeWidth}
        strokeDasharray={`${trailingStroke + halfNotchWidth} 10000`}
        strokeDashoffset={strokeDashoffset}
        d={getTrailingPath(width, radius, notchWidth, inset, isRtl)}
      />
      <path
        className={pathClassName}
        strokeWidth={strokeWidth}
        d={getPathBottom(width, height, radius, inset)}
      />
    </svg>
  );
}

NotchedOutline.propTypes = {
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: PropTypes.object.isRequired,
  /** @ignore */
  className: PropTypes.string,
  /** The height of the outline. */
  height: PropTypes.number.isRequired,
  /** If `true`, the outline is notched to accommodate text. */
  notched: PropTypes.bool,
  /** The width of the notch, where a label will be placed. */
  notchWidth: PropTypes.number.isRequired,
  /**
   * Render outline for a select component.
   */
  select: PropTypes.bool,
  /**
   * @ignore
   */
  theme: PropTypes.object,
  /** The width of the outline. */
  width: PropTypes.number.isRequired,
};

NotchedOutline.contextTypes = {
  muiFormControl: PropTypes.object,
};

export default withStyles(styles, { withTheme: true, name: 'MuiNotchedOutline' })(NotchedOutline);

[oliviertassinari]

Here is another issue on Edge 17, the glitch disappears as soon as I hover the text field.

[IsaiahByDayah]

Im having this issue as well reguardless of focus/hover state (so closer to https://github.com/mui-org/material-ui/issues/13264 but that was recently closed in favor of this issue). Not sure what information would be useful to help track down whats going wrong.

Looks like somewhere between <TextField> and <WithStyles(OutlinedInput)> the labelWidth prop is being swallowed and not properly passed on?

Edit: its happening consistently with the 2 components in the screenshot above but not in another place that I use the component the same way :/

[jalandaverde]

Got them same issue when the text field is not focused and the input label prop came from the theme provider

const theme = createMuiTheme({
    props: {
        MuiInputLabel: {
            shrink: true
         }
    },
})

It works fine if the TextField receives the InputLabelProps directly

[dariusblajan]

I had a similar issue with the border striking through the label for a select input. The solution I found in the demos uses ReactDOM.findDOMNode(labelRef).offsetWidth to set labelWidth as it is a required prop(it's actually the width of the element that hides the outline under the label), but I couldn't get it to work with refs.
I ended up using <TextField select> {...mappedOptions} </TextField> as shown in the examples here and it works great.

[adimshev]

I have same problem on Safari (macbook, ipad).
maps.mirlk.ru

And no problem on Chrome:

[GliderCodes]

having the same exact issue than @adimshe

issue occurs when you make changes to the borderRadius property. I can only see it on iPad, other devices work fine.
here's my code:

const CustomTextField = withStyles((theme) =>
  createStyles({
    root: {
      "& .MuiOutlinedInput-root": {
        "& fieldset": {
          borderRadius: `20px 0 0 20px`,
          color: theme.palette.primary.main,
        },
        "& .MuiOutlinedInput-notchedOutline": {},
      },
    },
  })
)(TextField);