Material-ui: [TextField] 양식 자동 완성이 텍스트 필드의 부동 레이블 텍스트를 업데이트하지 않습니다.

이것은 아마도 시작하기에 좋은 곳일 것입니다 ...

@illogikal 당신은 gif의 게시 할 수 있습니까?

여기 있습니다 :

노란색 강조 표시는 필드가 자동으로 채워 졌음을 나타냅니다. 보시다시피 암호는 채워져 있지만 레이블은 여전히 ​​제자리에 있습니다.

음, 흥미 롭군요. @mbrookes 모든 입력 유형을위한 것인지 아니면 비밀번호 입력만을위한 것인지 알고 있습니까?

확실하지 않음-주소와 비밀번호의 순서를 바꾸려고했지만 알려진 사용자 / 비밀번호를 입력하거나 새 비밀번호를 저장하기 위해 자동 완성이 실행되지 않았습니다. 다른 분야를 테스트하는 가장 좋은 방법을 찾아야합니다.

좋아, 가까운 장래에 TextField 항목 중 일부를 리팩토링 할 계획입니다. 나도 조금 실험 해 볼게. 다른 점이 있으면 알려주세요.

안녕하세요! 우리는이 문제를 겪고 있습니다. 이에 대한 잠재적 인 수정을 시도하고 실험하기 위해 로컬에서 할 수있는 일이 있습니까? 아니면 리팩터링을 기다려야할까요?

위에 나열된 비밀번호 필드에 정확한 문제가 있습니다. 그 외에도 일반 TextField 와 유사한 문제가 있습니다. 값을 입력하면 사라지는 힌트 텍스트 세트가 있습니다. 그러나 페이지가 렌더링 될 때 값을 설정하면 (딥 링크) 힌트 텍스트는 여전히 실제 값 뒤에 표시됩니다. 이것은 동일한 문제 일 가능성이 있습니까 아니면 별도의 문제입니까?

이것은 동일한 문제 일 가능성이 있습니까 아니면 별도의 문제입니까?

다른 문제인 것 같습니다.

수정 영감 : https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

코드에 추가 할 수 onChange 업데이트 할 수 state.isAutofilled

Chrome 버전 49.0.2623.87 (64 비트) OS X El Capitan

키를 누르거나 마우스를 클릭하면 올바르게 플로팅되지만 초기로드가 중단됩니다.

정확히 같은 문제 :

얘들 아?

같은 문제가 발생합니다.

MUI에서 작동하는 자동 완성을 비활성화하는 방법이 있습니까?

뿡뿡

몇 개의 필드를 만들고 " display : none "을 사용하여 숨기면됩니다. 예:

그런 다음 실제 필드를 아래에 두십시오.

http://stackoverflow.com/questions/15738259/disabling-chrome-autofill

onChange 이벤트를 발생시키는 솔루션이 있습니까?

@devdlabs https://github.com/callemall/material-ui/pull/3372/files

@antoinerousseau 이것이 master에 병합 될까요?

@devdlabs https://github.com/callemall/material-ui/pull/3372#issuecomment -191523369

이것은 유사한 문제 일 수 있습니다 (동일한 근본 원인, 다른 증상?)

언급 한대로 애니메이션 문제가 표시되지 않지만 TextField 컨테이너의 높이는 입력의 위쪽 여백을 고려하지 않습니다. 그 결과 TextField가 컨테이너 아래로 14px 확장됩니다. 매우 간단한 해결 방법이지만 자동 완성 기능으로 만 표시됩니다.

곧 수정 될 예정입니다.)

좋은 @nathanmarks , 감사합니다 !!

페이지를 클릭하지 않고 크롬이 자동 완성 될 때 플로팅 라벨을 업데이트하는 해킹을 찾았습니까?

이것은 여전히 ​​매우 고통스러운 문제입니다.

작동하지 않는 vanilla-autofill-event 를 사용해 보았습니다.

나는 redux-form (다른 많은 사람들과 마찬가지로)을 사용하고 있으며 추악한 해결 방법을 찾았습니다 (로그인 양식의 경우 다른 양식에는 관심이 없습니다).
크롬에서만 테스트 했으므로 고려중에 사용하십시오.

숨겨진 사용자 이름 및 비밀번호 필드를 추가했을 때 크롬은 전체 양식을 무시했습니다 (크롬이 신경 쓰지 않는 display : none으로 숨기지 않는 한).

그래서 4 개의 (: disappointed :) 추가 필드를 사용했습니다. 2 크롬이 내 양식을 무시하도록 (autocomplete = off가 작동하지 않음) 다른 가짜 양식에 2 개 더 추가했습니다. -양식 변경 이벤트 :

class Login extends Component {
  // This was tested under chrome only. It's ugly, but it works. Code was modified a bit for simplicity so it might not work out of the box.

  componentDidMount() {
    // Fix chrome auto-fill
    setTimeout(() => {
      const { change, dispatch }= this.props;
      if (this.refs.usernameAutoFill.value && ! this.refs.username.value) {
        dispatch(change('username', this.refs.usernameAutoFill.value));
      }
      if (this.refs.passwordAutoFill.value && !this.refs.password.value) {
        dispatch(change('password', this.refs.passwordAutoFill.value));
      }
    }, 500);
  }

  render() {
    const styles = {
      autofill: {
        height: 0,
        width: '1px',
        position: 'absolute',
        left: 0,
        top: 0
      }
    };

    return (
      <div>
        <form style={styles.autofill}>
          <input type="text" ref="usernameAutoFill" name="usernameAutoFill" />
          <input type="password" ref="passwordAutoFill" name="passwordAutoFill" />
        </form>
        <form autocomplete="off">
          <div style={styles.autofill}><input type="text" name="fakeusername" /><input type="password" name="fakepassword" /></div>
          <Field name="username" component={() => <TextField ref="username" name="username" floatingLabelText="Username" />}/>
          <Field name="password" component={() => <TextField ref="password" name="password" type="password" floatingLabelText="Password" />}/>
          <RaisedButton primary={true} label="Login" type="submit"/>
        </form>
      </div>
    )
  }
}
export default {
  Form: reduxForm({
    form: 'Login'
  })(Login)
}

간단하게 코드를 수정 했으므로 참조 용으로 만 사용하십시오.

@ adamtal3 autoComplete="off"

@justinko 정말 중요하지 않습니다. autoComplete react를 사용하면 autocomplete 됩니다.
js 값 ( {'off'} )이 아닌 문자열 값 ( "off" )을 사용했음을 알 수 있습니다.

내가 동의하는 것보다 React 표준과 일관성을 언급하고 있지만 큰 문제는 아니라고 생각합니다.

이것이 내 해결책입니다.

먼저 컴포넌트가 마운트되었을 때 사용자 이름이 자동으로 채워 졌는지 확인했습니다.
그렇다면 암호 필드의 상태를 업데이트합니다.
hasValue 가 true로 바뀌면 플로팅 레이블이 업데이트됩니다.

componentDidMount() {
    setTimeout(() => {
        if(this.refs.username.getValue()) {
            this.refs.password.setState({...this.refs.password.state, hasValue: true})
        }
    }, 100)
}

도움이 되었기를 바랍니다. :)

브라우저에서 자동으로 채워질 때 플로팅 레이블을 업데이트하는 방법을 찾았습니다.
`

setTimeout (function () {
var autofilled = document.querySelectorAll ( 'input # password : -webkit-autofill');
if (자동 완성) {
$ ( "input [type = password]"). parent (). addClass ( "is-dirty");
}
}, 500);
`
마지막에 준비된 문서 안에 있어야합니다.
"is-dirty"클래스는 플로팅 레이블을 트리거하는 클래스입니다.

react-ui와 함께 redux-form을 사용하고 있습니다. 나를위한 해결책은 필요한 입력 바로 뒤에 가짜 입력을 배치하는 것입니다.

  <TextField
     {...password}
     type="password"
     placeholder={formatMessage(messages.loginPasswordPlaceholder)}
     disabled={submitting}
   />
   <Icon name="password" className={theme.icon}/>
   <input className={theme.hiddenInput} type="password" />

React 16에 의해 수정되어야합니다 : https://github.com/facebook/react/issues/7211#issuecomment -266774957

0.17.1에서 0.18.1로 업데이트했을 때 동일한 문제가 발생했습니다.

나를 위해 일한 수정 :

class FixedTextField extends Component {
    constructor() { 
       super()
       this.state = { value: '' } }
    }
    textfield = null

    componentDidMount() {
        requestAnimationFrame(() => {
            this.setState({ value: this.textfield.getInputNode().value })
        })
    }
    render() {
       return <TextField {...this.props} value={this.state.value} />
    }
}

수정 사항의 백 포트가 React 15.6.0 에서 방금 릴리스되었습니다. 이 문제를 해결할 수 있는지 테스트 할 수있는 사람이 있습니까?

[참고 : 위의 "나도"게시물은 삭제됩니다. 토론을 시작하지 말고 투표 버튼을 사용하세요.].

@mbrookes 내가 테스트

@Stupidism 세부 사항?

2 년 전에 게시 한 것과 같습니다. https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism Material-UI의 버전, React의 버전, 브라우저 / 버전은?

  "name": "material-ui",
  "version": "0.18.3",

  "name": "react",
  "version": "15.6.0",



md5-b91bd30d63e87f3b504e2619fb81ef97



Google Chrome   59.0.3071.86 (Official Build) (64-bit)
OS  Linux
JavaScript  V8 5.9.211.31

: man_shrugging :이 경우 @ whtang906 의 해결 방법 이 현재 최선의 선택 인 것 같습니다.

redux-form의 경우

  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.refUsername = this.refUsername.bind(this);
    this.refPassword = this.refPassword.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
      }
    }, 100)
  }

  refUsername(component) {
    this.usernameRef = component.getRenderedComponent().refs.component;
  }
  refPassword(component) {
    this.passwordRef = component.getRenderedComponent().refs.component;
  }


            <Field
              name="username"
              withRef
              ref={this.refUsername}
              component={TextField}
            />

            <Field
              name="password"
              type="password"
              withRef
              ref={this.refPassword}
              component={TextField}
            />

내 앱이 조금 느려서 보험을 추가했습니다

  componentDidMount() {
    let times = 0;
    const interval = setInterval(() => {
      times += 1;
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
        clearInterval(interval);
      } else if (times >= 10) {
        clearInterval(interval);
      }
    }, 100)
  }

Chrome 자동 완성 비밀번호 필드에서 값을 가져올 수 없습니다.
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

내가 v1-beta 브랜치를 가지고 노는 한 문제는 그 과정에서 수정되었습니다. 재 작성 또는 반응의 업그레이드 일 수 있습니다. 우리가 그것에 대해 더들을 때까지 닫습니다. 토론 해 주셔서 감사합니다!

오류가 여전히 존재합니다 ...
[email protected]
[email protected]
크롬 60.0.3112.90

@artalar componentDidMount 솔루션을 시도해보세요 O (∩_∩) O

@Stupidism 솔루션에 감사드립니다! 나는 위의 모든 것을 시도했지만 그들 중 아무것도 작동하지 않았습니다. 아마 대부분 1 ~ 2 살이니까 ...
Btw,이 버그는 Chrome에서만 발생하며 Firefox는 완벽합니다. :)

@ Ivan-Parushev ref의 사용법이 변경 되었기 때문이라고 생각합니다. 문제가 해결 되었습니까?

여기서 해결되지 않았으며, componentDidMount에 존재하는 경우 localStorage에서 값을 채우고 모든 최신 버전에서 동일한 오류가 발생합니다.

여전히 수정을 기다리고 있습니다 ...

스레드를 잠그고 있습니다. 이 문제는 2 년 전입니다. 이제 v1-beta 브랜치에 초점을 맞추고 있습니다. 복제 예시가있는 사람이 있다면 v1-beta 브랜치의 새 호를 열어주세요.

이제 3 년이되었습니다. 이 문제는 최신 반응 및 머티리얼 UI 버전에도 여전히 존재합니다.

@tschaub Haha는

@tsmirnov 당신이

이 버그에 대한 CSS 솔루션이 있습니다.

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

여기 있습니다 :

노란색 강조 표시는 필드가 자동으로 채워 졌음을 나타냅니다. 보시다시피 암호는 채워져 있지만 레이블은 여전히 ​​제자리에 있습니다.

나는 같은 문제에 직면하고 있습니다.

이 버그에 대한 CSS 솔루션이 있습니다.

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

이것이 무엇을 의미하는지 설명해 주시겠습니까?

이 버그에 대한 CSS 솔루션이 있습니다.

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

이것이 무엇을 의미하는지 설명해 주시겠습니까?

: -webkit-autofill은 브라우저별로 자동 완성 된 필드를 선택합니다. 입력 바로 옆에 라벨을 놓고 : -webkit-autofill 선택기로 선택하세요. 도움이 더 필요하면 현재 HTML 구조를 공유하세요.

이 버그에 대한 CSS 솔루션이 있습니다.

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

이것이 무엇을 의미하는지 설명해 주시겠습니까?

: -webkit-autofill은 브라우저별로 자동 완성 된 필드를 선택합니다. 입력 바로 옆에 라벨을 놓고 : -webkit-autofill 선택기로 선택하세요. 도움이 더 필요하면 현재 HTML 구조를 공유하세요.

확실한! 여기 내 HTML이 있습니다. 감사
https://pastebin.com/yjJCip3r

이 버그에 대한 CSS 솔루션이 있습니다.

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

이것이 무엇을 의미하는지 설명해 주시겠습니까?

: -webkit-autofill은 브라우저별로 자동 완성 된 필드를 선택합니다. 입력 바로 옆에 라벨을 놓고 : -webkit-autofill 선택기로 선택하세요. 도움이 더 필요하면 현재 HTML 구조를 공유하세요.

확실한! 여기 내 HTML이 있습니다. 감사
https://pastebin.com/yjJCip3r

라벨은 입력 바로 뒤에 나오므로 html로 아무것도 할 필요가 없습니다.
자동 완성 된 입력 바로 옆에있는 레이블을 선택하고 아래와 같이 활성 레이블 스타일을 설정하십시오.

.mdl-textfield__input:-webkit-autofill + .mdl-textfield__label {
    // Active label styles here
    top: -20px; // Just an example
    transform: scale(0.75); // Just an example
}

어, @ kishan3 길을 잃은 것 같아요. MDL은 이쪽입니다-> https://github.com/google/material-design-lite/issues/4827 😆

(MDL이 짐이라는 사실을 감안할 때, 아마도 당신은 결국 올바른 장소에 왔을 것입니다!)

아 젠장! 이름과 혼동합니다. : 웃음 : @mbrookes 한 가지 질문 : CDN 링크가있는

@ kishan3 당신이 할 수있는 , 그것은 문서에서 말하는 것처럼, 클라이언트가이 수단을 구축하는 반면,이 캐시 된 적어도 처음 할 때까지, 전체 라이브러리를 다운로드 할 수 있지만 로컬 당신이 구성 요소가 포함되는 최적화 할 수 있음을 의미합니다.

해결책은 무엇입니까?

이 문제는 v0.x와 관련됩니다.

@oliviertassinari 이 stil은 v3.4.0에 존재합니다.

제 경우에는 드롭 다운을 사용하고 있습니다. 사용자가 드롭 다운에서 무언가를 선택한 다음 값을 상태로 설정하면 값에 연결된 TextField가 레이블을 부동하지 않습니다.

편집 : 보이는 것처럼 null 로 TextField 값을 초기화하면 새 값이 전달 될 때 부동 소수점이 이동하지 않습니다. null 대신 빈 문자열로 state의 값을 초기화하여 수정되었습니다.

아직 여기에있는 사람이 있다면이 효과가 적용된 TextField 에 InputLabelProps={{ shrink: true }} 이 prop을 설정했습니다. 우리 팀을위한 최고의 솔루션이었습니다.

@ tom-con 감사합니다, 그것은 나를 위해 완벽하게 작동했습니다.

이 문제는 2019 년에도 여전히 존재합니다 ...

아직 여기에있는 사람이 있다면이 효과가 적용된 TextField 에 InputLabelProps={{ shrink: true }} 이 prop을 설정했습니다. 우리 팀을위한 최고의 솔루션이었습니다.
나는 정말 혼란 스러웠고 당신은 문제를 해결했습니다! 최고의 권장 솔루션!

v0.x 문제 (2015)입니다. # 14427을 참조하세요.

이 버그에 대한 CSS 솔루션이 있습니다.

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

@ozturkcangokkaya 안녕하세요이 CSS 솔루션은 Chrome에서 잘 작동합니다. 하지만 firefox에서 내 양식을 확인할 때 부동 레이블이 작동하지 않습니다. 왜 webkit-autofill이 firefox에 영향을 미치는지 아십니까?

v4에 대해서는 # 14427을 참조하십시오.

가장 좋은 해결책은 Materialise 사용을 중지하고 Bootstrap 또는 다른 라이브러리를 사용하는 것입니다. 해결 방법을 찾아야하며 Google은 문제를 해결하는 데 관심이없는 것 같습니다.

아직 여기에있는 사람이 있다면이 효과가 적용된 TextField 에 InputLabelProps={{ shrink: true }} 이 prop을 설정했습니다. 우리 팀을위한 최고의 솔루션이었습니다.

감사합니다. InputLabelProps={{ shrink: form.password }} 를 사용하고 있으며 완벽하게 작동합니다.

<TextField
                id="loginPassword"
                label="Login Password"
                type="text"
                fullWidth
                value={form.password}
                onChange={(e) => setAttribute('form.password', e.target.value)}
                InputLabelProps={{ shrink: form.password }}
              />

내 프로젝트에 lodash.merge를 설치하는 문제를 해결 한 후 중첩 된 개체를 사용할 때 redux가 동일해야한다고 생각했기 때문에 텍스트 필드 구성 요소를 잘못 채우고 있음을 깨달았습니다.

보시다시피 두 개의 중첩 된 개체를 혼합 할 때 올바르게 채워지지 않습니다.

나는 라이브러리를 사용하여 이것을 해결했고 그렇게되었습니다.

최신 버전의 Material-UI (v4.9.0)는 기본적으로이를 지원합니다.