Material-ui: [BidangTeks] Isiotomatis formulir tidak memperbarui teks label mengambang pada bidang teks

Ini mungkin tempat yang baik untuk memulai ...

@illogikal bisakah kamu memposting gif itu?

Ini dia:

Sorotan kuning menunjukkan bidang telah diisi otomatis. Seperti yang Anda lihat, kata sandi sudah diisi, tetapi labelnya masih ada.

Mm, itu menarik. @mbrookes Apakah Anda tahu apakah itu untuk semua jenis masukan atau hanya masukan kata sandi?

Tidak yakin - Saya mencoba menukar urutan alamat dan kata sandi, tetapi IsiOtomatis tidak berfungsi, baik untuk mengisi pengguna / kata sandi yang dikenal, atau untuk menyimpan yang baru. Saya harus memikirkan cara terbaik untuk menguji bidang lain.

Oke, saya berencana untuk meninjau ulang beberapa item TextField dalam waktu dekat. Saya akan mencoba sedikit bereksperimen juga. Beri tahu saya jika Anda memperhatikan hal lain.

Halo! Kami mengalami masalah ini. Adakah yang dapat kami lakukan secara lokal untuk mencoba dan bereksperimen dengan beberapa perbaikan potensial untuk ini? Atau harus menunggu refactor?

Kami memiliki masalah persis dengan bidang kata sandi yang tercantum di atas. Selain itu, kami memiliki masalah serupa dengan TextField . Kami memiliki kumpulan teks petunjuk yang hilang jika Anda mengetikkan nilai masuk Namun, jika kami menyetel nilai saat halaman merender (tautan dalam) teks petunjuk masih terlihat di belakang nilai sebenarnya. Apakah ini mungkin masalah yang sama atau apakah itu sesuatu yang terpisah?

Apakah ini mungkin masalah yang sama atau apakah itu sesuatu yang terpisah?

Sepertinya masalah yang berbeda.

inspirasi untuk perbaikan: https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

kode itu dapat ditambahkan ke onChange untuk memperbarui state.isAutofilled

Versi Chrome 49.0.2623.87 (64-bit) OS X El Capitan

jika ada tombol yang ditekan atau mouse diklik - itu mengapung dengan benar, tetapi beban awal rusak.

Masalah yang sama persis:

Ada ide, teman?

Mengalami masalah yang sama.

Apakah ada cara untuk menonaktifkan IsiOtomatis yang berfungsi dengan MUI?

@kandara

Cukup buat beberapa bidang dan sembunyikan dengan " display: none ". Contoh:

Kemudian letakkan bidang asli Anda di bawahnya.

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

ada solusi untuk mengaktifkan acara onChange?

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

@antoinerousseau Apakah ini akan digabungkan dalam master?

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

Ini mungkin masalah yang serupa (akar penyebab yang sama, manifestasi yang berbeda?)

Saya tidak melihat masalah animasi seperti yang disebutkan, tetapi tinggi wadah TextField tidak memperhitungkan margin atas pada input. Ini menghasilkan TextField yang memanjang 14px di bawah wadah. Ini solusi yang cukup mudah, tetapi saya hanya melihatnya dengan pelengkapan otomatis:

Ini akan segera diperbaiki;)

bagus @nathanmarks , terima kasih !!

dan apakah Anda menemukan peretasan untuk memperbarui label mengambang saat chrome mengisi otomatis tanpa mengeklik laman juga?

Ini masih merupakan masalah yang cukup menyakitkan.

Saya mencoba menggunakan vanilla-autofill-event yang tidak berhasil.

Saya menggunakan redux-form (seperti banyak lainnya) dan saya menemukan solusi yang buruk (hanya untuk formulir login saya, saya tidak peduli dengan formulir lain).
Saya mengujinya hanya di krom jadi gunakan dengan pertimbangan.

Ketika saya menambahkan bidang nama pengguna dan kata sandi tersembunyi, chrome mengabaikan seluruh formulir (kecuali menyembunyikannya dengan display: none yang tidak dipedulikan oleh chrome).

Jadi saya menggunakan 4 bidang ekstra (: kecewa :). 2 untuk membuat chrome mengabaikan formulir saya (autocomplete = off tidak berfungsi) dan 2 lainnya dalam bentuk palsu yang berbeda untuk membuat chrome mengisi, daripada di componentDidMount saya menambahkan batas waktu yang menyalin nilai dari bidang palsu ke yang asli menggunakan redux -membentuk acara perubahan:

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)
}

Saya telah memodifikasi kode untuk kesederhanaan jadi gunakan hanya untuk referensi.

@ adamtal3 autoComplete="off"

@justinko Itu tidak terlalu penting. Jika Anda menggunakan autoComplete react akan mengubahnya menjadi autocomplete .
Anda dapat melihat saya menggunakan nilai string ( "off" ) dan bukan nilai js ( {'off'} ).

Jika Anda mengacu pada standar dan konsistensi React daripada saya setuju, tapi saya tidak berpikir itu masalah besar.

Ini solusi saya.

Pertama, saya memeriksa apakah nama pengguna diisi otomatis saat komponen dipasang.
Jika ya, saya akan memperbarui status bidang kata sandi.
Setelah hasValue berubah menjadi true, label mengambang akan diperbarui.

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

Semoga ini membantu. :)

saya menemukan cara untuk memperbarui label mengambang ketika otomatis diisi oleh browser.
`

setTimeout (function () {
var autofilled = document.querySelectorAll ('input # password: -webkit-autofill');
jika (diisi otomatis) {
$ ("input [type = password]"). parent (). addClass ("is-dirty");
}
}, 500);
`
ini harus siap di dalam dokumen Anda di bagian akhir.
class "is-dirty" adalah kelas yang memicu label mengambang Anda.

Saya menggunakan redux-form dengan react-ui. Solusi bagi saya adalah menempatkan input palsu tepat setelah input yang dibutuhkan.

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

Mudah-mudahan harus diperbaiki oleh React 16: https://github.com/facebook/react/issues/7211#issuecomment -266774957

Masalah yang sama terjadi pada saya ketika saya memperbarui dari 0.17.1 ke 0.18.1

Perbaiki yang berhasil untuk saya:

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} />
    }
}

Port belakang perbaikan baru saja dirilis di React 15.6.0 . Adakah yang berada dalam posisi untuk menguji apakah itu menyelesaikan masalah ini?

[FYI: Kiriman "saya juga" di atas akan dihapus - gunakan tombol pemungutan suara alih-alih menggerakkan diskusi.].

@mbrookes Tidak diperbaiki saat saya diuji.

@Rincian Kebodohan ?

Sama seperti yang Anda posting 2 tahun lalu. https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism Apa versi Material-UI, versi React apa, browser / versi apa?

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

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



md5-f7a2844706b5476282e07a6c64e29edb



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

: man_shrugging: Dalam kasus itu, solusi @ whtang906 tampaknya menjadi pilihan terbaik untuk saat ini.

Untuk bentuk redux

  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}
            />

Aplikasi saya agak lambat, jadi saya menambahkan asuransi

  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)
  }

Tidak bisa mendapatkan nilai dari bidang sandi isi otomatis chrome
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

Sejauh saya telah bermain dengan cabang v1-beta, masalah telah diperbaiki di sepanjang jalan. Ini bisa berupa penulisan ulang atau peningkatan reaksi. Saya tutup sampai kita mendengar lebih banyak tentang itu. Terima kasih atas pembahasannya di sini!

Kesalahan masih ada ...
[email protected]
[email protected]
Chrome 60.0.3112.90

@artalar Coba saja componentDidMount solusi O (∩_∩) O

@Stupidisme Terima kasih atas solusinya! Saya telah mencoba semua cara di atas dan tidak ada yang berhasil. Mungkin karena kebanyakan dari mereka berumur 1-2 tahun ...
Btw, bug ini hanya terjadi di Chrome, Firefox baik-baik saja :)

@ Ivan-Parushev Saya kira itu karena penggunaan ref telah diubah. Jadi, apakah masalah Anda terpecahkan atau tidak?

Tidak diselesaikan di sini, saya mengisi nilai dari localStorage jika ada di componentDidMount, dan kesalahan yang sama dengan semua versi terbaru.

Masih menunggu perbaikan ...

Saya mengunci utas. Masalah ini berusia 2 tahun. Karena kami sekarang fokus pada cabang v1-beta. Jika ada yang memiliki contoh reproduksi, buka edisi baru untuk cabang v1-beta.

Sudah 3 tahun sekarang. Masalah ini masih ada dengan versi ui react dan material terbaru.

@tschaub Haha, seperti input tetap posisi ios mendapat masalah fokus.

@tsmirnov Saatnya Anda terjebak dan memperbaikinya. 😜

Ada solusi css untuk bug ini

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

Ini dia:

Sorotan kuning menunjukkan bidang telah diisi otomatis. Seperti yang Anda lihat, kata sandi sudah diisi, tetapi labelnya masih ada.

Saya menghadapi masalah yang sama.

Ada solusi css untuk bug ini

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

Bisakah Anda menjelaskan apa artinya ini?

Ada solusi css untuk bug ini

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

Bisakah Anda menjelaskan apa artinya ini?

: -webkit-autofill memilih kolom yang diisi otomatis oleh browser. Tempatkan label Anda tepat di sebelah masukan dan pilih dengan: -webkit-autofill selector. Jika Anda memerlukan bantuan lebih lanjut, harap bagikan struktur html Anda saat ini.

Ada solusi css untuk bug ini

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

Bisakah Anda menjelaskan apa artinya ini?

: -webkit-autofill memilih kolom yang diisi otomatis oleh browser. Tempatkan label Anda tepat di sebelah masukan dan pilih dengan: -webkit-autofill selector. Jika Anda memerlukan bantuan lebih lanjut, harap bagikan struktur html Anda saat ini.

Tentu! Ini HTML saya Tolong bantu. Terima kasih
https://pastebin.com/yjJCip3r

Ada solusi css untuk bug ini

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

Bisakah Anda menjelaskan apa artinya ini?

: -webkit-autofill memilih kolom yang diisi otomatis oleh browser. Tempatkan label Anda tepat di sebelah masukan dan pilih dengan: -webkit-autofill selector. Jika Anda memerlukan bantuan lebih lanjut, harap bagikan struktur html Anda saat ini.

Tentu! Ini HTML saya Tolong bantu. Terima kasih
https://pastebin.com/yjJCip3r

Label Anda muncul tepat setelah input, jadi Anda tidak perlu melakukan apa pun dengan html.
Cukup pilih label Anda tepat di sebelah masukan yang diisi otomatis dan atur gaya label aktif Anda seperti yang ditunjukkan di bawah ini.

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

Uh, @ kishan3 Saya pikir Anda tersesat. MDL begini -> https://github.com/google/material-design-lite/issues/4827 😆

(Meskipun mengingat bahwa MDL adalah Jim mati, mungkin Anda telah datang ke tempat yang tepat!)

Ah sial! Ini membingungkan dengan nama. : laughing: @mbrookes Namun ada satu pertanyaan: dapatkah kita menggunakan materi UI langsung ke HTML dengan link CDN? Saya tidak pernah menyadari MDL sudah mati: menangis:

@ kishan3 Anda bisa , meskipun seperti yang disebutkan di dokumen, ini berarti klien harus mengunduh seluruh pustaka, setidaknya untuk pertama kali hingga di-cache, sedangkan membangunnya secara lokal berarti Anda dapat mengoptimalkan komponen mana yang disertakan.

Apa solusinya?

Masalah ini menyangkut v0.x.

@oliviertassinari stil ini ada di v3.4.0.

Dalam kasus saya, saya menggunakan dropdown, ketika pengguna memilih sesuatu di dropdown kemudian menetapkan nilai ke status, BidangTeks yang terkait dengan nilai tidak mengapung label.

Edit : Seperti yang terlihat, jika saya init nilai TextField dengan null maka float tidak akan bergerak ketika nilai baru dilewatkan. Diperbaiki dengan menginisialisasi nilai dalam status dengan string kosong alih-alih null

Jika ada yang masih di sini, saya hanya menyetel properti ini InputLabelProps={{ shrink: true }} pada BidangTeks yang terpengaruh. Adalah solusi terbaik untuk tim kami.

@ tom-con thanks man, ini bekerja untuk saya dengan sempurna

masalah ini masih ada di tahun 2019 ...

Jika ada yang masih di sini, saya hanya menyetel properti ini InputLabelProps={{ shrink: true }} pada BidangTeks yang terpengaruh. Adalah solusi terbaik untuk tim kami.
Saya benar-benar bingung dan Anda memecahkan masalah! Solusi terbaik yang direkomendasikan!

Ini adalah masalah v0.x (2015), lihat # 14427.

Ada solusi css untuk bug ini

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

@ Ozturkcangokkaya Hai, solusi css ini berfungsi dengan baik di Chrome. Tetapi ketika saya memeriksa formulir saya di firefox, label mengambang tidak berfungsi. Apakah Anda tahu mengapa webkit-autofill memengaruhi firefox?

Silakan lihat # 14427 untuk v4.

Solusi terbaik adalah berhenti menggunakan Materialize dan gunakan Bootstrap atau library lain, mengingat Anda harus menemukan solusi dan Google tampaknya tidak tertarik untuk memperbaiki masalah tersebut.

Jika ada yang masih di sini, saya hanya menyetel properti ini InputLabelProps={{ shrink: true }} pada BidangTeks yang terpengaruh. Adalah solusi terbaik untuk tim kami.

Terima kasih, saya menggunakan ini: InputLabelProps={{ shrink: form.password }} , dan berfungsi dengan sempurna.

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

Saya memecahkan masalah saya menginstal lodash.merge pada proyek saya, kemudian saya menyadari bahwa saya mengisi komponen bidang teks dengan tidak benar itu karena saya pikir perilaku redux harus sama ketika saya menggunakan objek bersarang.

Seperti yang Anda lihat, saya tidak mengisi dengan benar saat mencampur dua objek bersarang.

Saya menyelesaikan ini menggunakan perpustakaan dan begitulah.

Perhatikan bahwa versi Material-UI (v4.9.0) terbaru mendukungnya secara default.