Material-ui: [TextField] क्रोम क्रोम ऑटोफिल संभालें

इस समस्या को ठीक करने की आवश्यकता है! # 14453 समस्या को दूर करने के लिए कुछ तरीके प्रदान कर सकता है।
@garygrubb मैं सोच रहा हूं, क्या आप एक प्रजनन उदाहरण बनाने में सक्षम हैं जिसका उपयोग हम समस्या को हल करने के लिए लगातार कर सकते हैं? धन्यवाद! यह Google मुख्य लॉगिन फ़ॉर्म के बहुत करीब दिखता है:

देरी से प्रतिक्रिया देने के लिए माफ करें। मैं कोशिश करूँगा और एक छोटे से पुनरुत्पादन करूँगा जब समय इस सप्ताह के अंत में अनुमति देगा। इस बीच में मेरे पास एक अस्थायी फिक्स है - टेक्स्टफिल्ड में से किसी एक पर ऑटोफोकस सेट करने से समस्या हल हो जाती है।

`                            <TextField
                                required
                                **autoFocus**
                                variant="outlined"
                                id="username"
                                label="mobile number"
                                defaultValue=""
                                margin="normal"
                                name="username"
                                type="tel"
                                onChange={this.handleChange}
                                error={!this.state.validMobile}
                                autoComplete="tel-national username"
                            />

TextFields में से किसी एक पर ऑटोफोकस सेट करने से समस्या हल हो जाती है।

मेरे लिए काम करने के लिए प्रतीत नहीं होता है।

ऑटो भरे पाठ के लिए पीले रंग की पृष्ठभूमि पर भी ध्यान दें, क्या इसे ओवरराइड किया जा सकता है?

@garygrubb मैंने एक थीम ओवरराइड के माध्यम से ऐसा किया:

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        '&:-webkit-autofill': {
          transitionDelay: '9999s',
          transitionProperty: 'background-color, color',
        },
      },
    },
  },
});

आदर्श नहीं है, लेकिन यह कुछ है।

विकल्प इनपुट भरने के लिए एक बॉक्स-शैडो का उपयोग करना है: https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

@oliviertassinari यह चाल हो सकती है: https://stackoverflow.com/a/41530164/396889

इसके अलावा, FYI करें: https://github.com/facebook/react/issues/1159

@MarkMurphy किसी भी विचार मैं समस्या को कैसे पुन: पेश कर सकता हूं?

@MarkMurphy किसी भी विचार मैं समस्या को कैसे पुन: पेश कर सकता हूं?

मेरे लिए, मैंने एक साधारण उपयोगकर्ता नाम और पासवर्ड फ़ॉर्म बनाया और क्रोम को मेरी साख याद रखने की अनुमति दी।

MacOS हाई सिएरा 10.13.6 पर क्रोम 72.0.3626.119 का उपयोग करना

@ सामग्री- ui / मुख्य संस्करण "3.8.1"
@ सामग्री-यूआई / शैलियों संस्करण "3.0.0-अल्फा.6"

@MarkMurphy मैं इसे https://material-ui.com/getting-started/page-layout-examples/sign-in/ के साथ पुन: पेश कर सकता था:

यह टेक्स्ट फील्ड स्टैंडर्ड वैरिएंट के साथ है। इसलिए, हम दो मुद्दों को नोटिस कर सकते हैं:

1. फोकस सक्रिय स्थिति का पता नहीं लगाया गया है, हमारे पास # 14132 में इसके लिए एक फिक्स है, बस प्रयास का नेतृत्व करने के लिए किसी की प्रतीक्षा कर रहा है।
2. पृष्ठ पर फ़ोकस ले जाने पर भरण स्थिति का केवल पता लगाया जाता है।

आइए अब उल्लिखित संस्करण के साथ प्रयास करें। हम इस पृष्ठ का उपयोग कर सकते हैं: https://deploy-preview-14499--material-ui.netlify.com/getting-started/page-layout-examples/sign-in-side/

यह इसकी क्रोम ऑटोफिल समस्या की तरह लगता है। अगर हमें क्रोम के ऑटोफिल का पता लगाने के तरीकों के साथ प्रदान किया गया था, तो यह एक आसान समाधान होगा ... लेकिन मुझे किसी भी समाधान की जानकारी नहीं है। केवल समाधान सभी textfields के लिए स्वत: पूर्ण / ऑटोफिल को बंद करना था।

@ ymoon715 कम से कम एक अन्य व्यावहारिक समाधान है जिसे मैंने ऊपर एक लिंक पोस्ट किया

समाधान दस्तावेज़:

• स्वत: पूर्ण अक्षम करना: https://stackoverflow.com/a/30976223/882337

• ओवरराइडिंग स्टाइल: http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes- लागू-yellow-background-on-autocompleted-inputs

• ऑटोफिल शैलियों को अक्षम करना (ऊपर दिए गए दूसरे लिंक से स्निपेट):

input:-webkit-autofill,
.my-class:-webkit-autofill {
    -webkit-transition-delay: 9999999s;
}

धन्यवाद @cezarderevlean , मुझे पीले रंग की पृष्ठभूमि से छुटकारा मिला, अब बस यह पता लगाने की आवश्यकता है कि ग्रे आउट हेल्पर टेक्स्ट को कैसे हटाया जाए।

यदि आप ऊपर दिए गए पहले लिंक में बताए अनुसार ऑटोफिल को "डिसेबल" नहीं करना चाहते हैं, तो ध्यान रखें कि ऑटोफिल के बाद, यह आपके स्क्रीनशॉट की तरह ही दिखाई देगा जब पेज किसी कोड परिवर्तन से रीफ्रेश हो जाए
विकास (जहाँ तक मैंने परीक्षण किया है)। एक सामान्य ब्राउज़र लोड / रिफ्रेश ठीक रहेगा, यह प्लेसहोल्डर को सिकोड़ देगा।

इसके अलावा, अगर मैंने जो ऊपर कहा है वह असत्य साबित होता है, तो आप जिस पर लागू कर सकते हैं, वह हमेशा प्लेसहोल्डर को इस प्रोप के साथ TextField पर सिकोड़ कर रखता है:

InputLabelProps={{
    shrink: true,
}}

@cezarderevlean धन्यवाद तुम सही हो। एक सामान्य ब्राउज़र रिफ्रेश ठीक काम करता है।

मुझे नहीं पता कि मैंने इसे कैसे याद किया लेकिन @MarkMurphy के पास एक समान समाधान तरीका था और यह सामग्री विषय ओवरराइड का उपयोग करता है जो उपयोग के मामले के लिए थोड़ा क्लीनर है। धन्यवाद मार्क।

यदि आप ऊपर दिए गए पहले लिंक में बताए अनुसार ऑटोफिल को "डिसेबल" नहीं करना चाहते हैं, तो ध्यान रखें कि ऑटोफिल के बाद, यह आपके स्क्रीनशॉट की तरह ही दिखाई देगा जब पेज किसी कोड परिवर्तन से रीफ्रेश हो जाए
विकास (जहाँ तक मैंने परीक्षण किया है)। एक सामान्य ब्राउज़र लोड / रिफ्रेश ठीक रहेगा, यह प्लेसहोल्डर को सिकोड़ देगा।

इसके अलावा, अगर मैंने जो ऊपर कहा है वह असत्य साबित होता है, तो आप जिस पर लागू कर सकते हैं, वह हमेशा प्लेसहोल्डर को इस प्रोप के साथ TextField पर सिकोड़ कर रखता है:

InputLabelProps={{
    shrink: true,
}}

धन्यवाद, यह मेरे लिए काम किया।

उपयोगकर्ता नाम फ़ील्ड पर autoFocus और पासवर्ड फ़ील्ड पर autoComplete='new-password' सेट करना भी मेरे लिए चाल है।

अद्यतन: मुझे लगता है कि मैं यहाँ बंदूक कूद गया। कोई विचार क्यों?

उन लोगों के लिए जो इनपुट के वास्तविक मूल्यों को प्राप्त करना चाहते हैं, केवल मानों की उपस्थिति का पता लगाने के बजाय (देखें https://github.com/mui-org/material-ui/issues/14427#issuecomment-4660549066, I) इस एसओ लेख में विस्तृत समाधान के साथ आया हूं: https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/56157489#5615589। लिंक में इस समग्र मुद्दे का एक अच्छा इतिहास है जो सामान्य रूप से क्रोम को प्रभावित करता है।

  componentDidMount() {
    var evt = new MouseEvent("click", {
      view: window,
      clientX: 0
    });
    window.dispatchEvent(evt);
    let iterations = 0;

    const interval = setInterval(() => {
      const value = this.inputs.email.value;
      // plain js alternative:
      // const value = document.getElementById("email").value;
      if (!!value || iterations > 20) {
        console.log(value);
        return clearInterval(interval);
      }

      iterations++;
      console.log("not found -> repeat");
    }, 100);
  }

असल में, मैं इनपुट पर माउस क्लिक करने के लिए मजबूर करता हूं इसलिए Chrome इनपुट पर मान सेट करता है। फिर बाद में जब मूल्य तैयार होता है, तो मैं मूल्य को पकड़ लेता हूं। यह निश्चित रूप से हैक करने योग्य है, लेकिन क्रोम हमें कोई विकल्प नहीं छोड़ता है ... (एसओ लेख में क्रोम के रुख का विवरण देखें)।

TL; DR: यह एक ब्राउज़र समस्या है। ऑटोफिलिंग फॉर्म बनाते समय वे लगातार इनपुट ईवेंट नहीं करते हैं।

यह ब्राउज़र स्तर पर एक समस्या है। यदि मैं पृष्ठ के अंदर क्लिक करता हूं और फिर इसे सही ढंग से लोड करता हूं तो इनपुट घटनाओं को भेज देता हूं। यदि मैं पृष्ठ पर क्लिक करता हूं, तो नावबार में क्लिक करें यह केवल दूसरे दर्ज पर काम करना बंद कर देता है। अगर मैं पृष्ठ के लिंक को कॉपी करके पृष्ठ पर उतरता हूं और इसे नावबार में दर्ज करता हूं तो यह भी काम करता है।

मुझे यकीन नहीं है कि हम सभी ब्राउज़रों के लिए इसे ठीक कर सकते हैं क्योंकि पोल वैल्यू आटोफिल्ड होने पर भी इनपुट वैल्यू अभी भी खाली है। केवल क्रोम के लिए एक साफ-सुथरी चाल है। जांच करेंगे कि क्या केवल क्रोम में ही ये मुद्दे हैं।

@ eps1lon क्या आपने क्रोमियम में बग खोला है यदि यह क्रोमियम संबंधित है?

यह मेरे लिए काम नहीं करता है: https://github.com/mui-org/material-ui/issues/718#issuecomment -529064043।
यह काम करता है: InputLabelProps = {{संकोचन: सत्य}}, हालांकि यह हमेशा सिकुड़ा रहता है

समस्या को हल करने के लिए निम्नलिखित अंतर लगता है:

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index d258e5b71d..a7aebb1288 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -311,6 +311,10 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
   };

+  // Check the input state on mount, in case it was filled by the user
+  // or auto filled by the browser before the hydration (for ssr).
+  React.useEffect(() => {
+    checkDirty(inputRef.current);
+  }, []);
+
   const handleClick = event => {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();

क्या कोई भी फिक्स की गुणवत्ता की पुष्टि कर सकता है?

@oliviertassinari सामग्री ui में एक काम कर रहे घटक की जरूरत है, लेकिन अगर यह ऊपर उल्लिखित @ eps1lon के रूप में क्रोमियम बग है, तो यह वर्कअराउंड फिक्स केवल अस्थायी रूप से होना चाहिए, और समस्या क्रोमियम के भीतर तय की जानी चाहिए। क्या आप इस बात की पुष्टि कर सकते हैं कि यह क्रोमियम में एक बग है या सिर्फ एक MUI बग है?

यदि यह क्रोमियम बग है, तो हमें यह जांचना चाहिए कि क्या क्रोमियम में इसके लिए कोई बग खोला गया है और यदि नहीं खुला है? कुछ इस तरह: क्रोमियम खोज परिणाम

(Https://github.com/mui-org/material-ui/issues/14427#issuecomment-524535710)

मुझे नहीं लगता कि यह इस बिंदु पर Chrome के साथ कोई समस्या है। मुझे लगता है कि यह प्रतिक्रिया और सर्वर-साइड रेंडरिंग के साथ एक मुद्दा है। यदि कोई उपयोगकर्ता किसी इनपुट में सामग्री लिखता है, तो रिएक्ट हाइड्रेट से पहले, हमें इसके बारे में कभी सूचित नहीं किया जाता है: https://github.com/facebook/react/issues/12955

@oliviertassinari लेकिन सर्वर साइड रेंडरिंग क्रिएट-रिएक्शन-ऐप डेवलपमेंट सर्वर में नहीं हो रहा है?

• प्रतिक्रिया बग रिपोर्ट: https://github.com/facebook/react/issues/1159
• iOS विशिष्ट बग: https://bugs.chromium.org/p/chromium/issues/detail?id=895898

यह मुद्दा सबसे अधिक संभावना है कि किसी भी onInput या onChange संचालकों को जावास्क्रिप्ट के माध्यम से सेट करने की आवश्यकता है। यदि क्रोम ऑटोफिल के बाद ऐसा होता है तो ये ईवेंट खो जाते हैं। अधिक जावास्क्रिप्ट और अधिक संभावना है कि आप घटनाओं को ढीला करते हैं। रिएक्ट ने उन घटनाओं को कम करने का प्रयास शुरू कर दिया, जो बिना प्रतिक्रिया के पकड़ में आ जाती हैं। यह हाइड्रेटेड UI की मदद करेगा।

दूसरा मुद्दा यह है कि कभी-कभी input.value सेट नहीं होता है, हालांकि मूल्य स्वतःपूर्ण होता है। इनपुट पर ध्यान केंद्रित करने / धुंधला करने के बाद ही, जिसके अनपेक्षित साइड-इफेक्ट्स होते हैं (उदाहरण के लिए सत्यापन)।

इस मुद्दे पर सही ढंग से शोध करना बहुत मुश्किल है क्योंकि लगभग कोई रिपोर्ट एक प्रतिलिपि प्रस्तुत करने योग्य उदाहरण नहीं है। जब तक हम समस्या को ठीक से पहचान नहीं लेते हैं, तब तक हमें कोई फिक्स लागू नहीं करना चाहिए, हालांकि सैद्धांतिक रूप से @oliviertassinari https://github.com/mui-org/material-ui/issues/14427#issuecomment -5301818849 से तय होता है कि इसे कम से कम कवर करना चाहिए घटनाओं को गिरा दिया।

@ eps1lon दिलचस्प। मेरा प्रस्तावित अंतर केवल उस मुद्दे पर केंद्रित है जिसे मैं https://material-ui.com/getting-started/page-layout-examples/sign-in/ (देव मोड में, अपने स्थानीय वातावरण में) पुन: प्रस्तुत कर सकता हूं। मुझे इस बात की पुष्टि करने के लिए एक अंतिम परीक्षण चलाने की जरूरत है (तुल्यकालिक रूप से परिवर्तन की घटना को सुनने के लिए) कि "जलयोजन से पहले शुरू होने वाली घटना" समस्या की जड़ है। मुझे लगता है कि यह निपटने के लायक है, कम से कम जब तक रिएक्ट https://github.com/facebook/react/issues/12/55 में कुछ दिलचस्पी दिखाते हैं

@ Croraf आप CRA के साथ समस्या को कैसे पुन: पेश करते हैं?

मेरा मानना ​​है कि "घटना से पहले जलयोजन शुरू हो गया" समस्या हमें https://github.com/mui-org/material-ui/issues/14132#issuecomment -453657016 में भी प्रभावित करती है।

@oliviertassinari CRA यहां अप्रासंगिक है, लेकिन CRA के साथ निम्नलिखित कोड का उपयोग किया जा सकता है (हो सकता है कि यह कोडकंडबॉक्स भी CRA आंतरिक रूप से उपयोग करता हो): https://codesandbox.io/s/textinput-bug-hsv9m

ए) इसे इस कोडैंडबॉक्स में पुन: पेश करने के लिए:
1) नई विंडो में सैंडबॉक्स के ऐप का पूर्वावलोकन खोलें।
2) क्रेडेंशियल दर्ज करें और सहेजें (क्रोम संवाद के बाद उन्हें बचाने के लिए कहता है)
3) समस्या को देखने के लिए विंडो को रिफ्रेश करें (जैसा कि क्रोम ऑटोफिल लागू करेगा)। समस्या लगातार ताज़ा पर दिखाई नहीं देती है, लेकिन F5 पर क्लिक करने के साथ (तेज़ डबल ताज़ा) यह लगभग लगातार पुन: पेश किया जाता है।

बी) इसके अलावा मुझे कुछ ऐसा ही मिला
1) कोडैंडबॉक्स ऐप प्रीव्यू में (अलग ऐप विंडो में नहीं)।
2) फ़ॉर्म भरें और सबमिट करें (ताकि Chrome उपयोगकर्ता नाम / पासवर्ड संयोजन संग्रहीत करता है)
3) सिर्फ ऐप प्रीव्यू को रीलोड करें। फॉर्म तुरंत स्वत: पूर्ण नहीं होगा। (सामग्री-यूआई सैंडबॉक्स में आप खेतों के स्वतःभरण सामग्री को हटा सकते हैं)
4) यूजर नेम टेक्स्टफील्ड पर क्लिक करें। Chrome आपको उपयोगकर्ता चुनने की पेशकश करेगा।
5) उपयोगकर्ता को हॉवर करें और पासवर्ड फ़ील्ड पर हो रही समस्या देखें।

@ eps1lon का कहना है कि हैंडलर के सेट होने से पहले क्रोम आग से संबंधित अंजाम दे सकता है।

लेकिन प्रतिक्रिया में DOM में दर्ज किए गए इनपुट को बनाने से पहले क्रोम कैसे ऑटोफिल कर सकता है, और जावास्क्रिप्ट को इवेंट हैंडलर सेट करने के लिए पर्याप्त चलाने से पहले रिएक्ट उन्हें DOM में कैसे बना सकता है?

यह मुझे गलत लगता है, और शायद SSR के साथ हो सकता है (हालांकि मुझे नहीं पता कि यह कैसे काम करता है)। लेकिन CRA डेवलपमेंट सर्वर SSR का उपयोग नहीं करता है।

@ eps1lon का कहना है कि हैंडलर के सेट होने से पहले क्रोम आग से संबंधित अंजाम दे सकता है।

यह केवल स्थैतिक html पर लागू होता है जो प्रतिक्रिया द्वारा हाइड्रेटेड होता है और केवल सैद्धांतिक रूप से निर्मित होता है क्योंकि हमारे पास इस समय प्रजनन नहीं था। अब हमारे पास वास्तविक मुद्दों की जांच कर सकते हैं।

मैं Chrome v76.0.3809.132, macOS v10.14.6 पर समस्या को पुन: पेश नहीं कर सकता ।
मैं क्रोम v76.0.3809.87, विंडोज 10 पर इस मुद्दे का हिस्सा पुन: पेश कर सकता हूं।

मैं उसी सेटिंग, Chrome v76.0.3809.132, macOS v10.14.6 पर समस्या को पुन: उत्पन्न कर सकता हूं।

मेरा समाधान:

import { isChrome, osName} from "react-device-detect";
.....
.....

  const isChromeOSX = osName === 'Mac OS' && isChrome

  const [shrink, setShrink] = useState(isChromeOSX ? true : undefined)

  useEffect(() => {
    if(isChromeOSX) {
      const listen = () => {
        setShrink(undefined)
        window.removeEventListener('click',listen)
      }
      window.addEventListener('click', listen);
      return () => {
        window.removeEventListener('click',listen)
      };
    }
  }, [])

  return  <TextField
          .....
          variant="outlined"
          InputLabelProps={{ shrink }}
        />

निम्नलिखित भिन्न समस्या को घटित करता है जिस समस्या को मैं पुन: पेश कर सकता हूं, क्या कोई इसकी पुष्टि कर सकता है?

diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index 0ede7ca404..c7cb22aeb9 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -145,6 +145,14 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     };
   }

+  const onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
+
   const childContext = {
     adornedStart,
     disabled,
@@ -156,16 +164,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     onBlur: () => {
       setFocused(false);
     },
-    onEmpty: () => {
-      if (filled) {
-        setFilled(false);
-      }
-    },
-    onFilled: () => {
-      if (!filled) {
-        setFilled(true);
-      }
-    },
+    onEmpty,
+    onFilled,
     onFocus: () => {
       setFocused(true);
     },
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index d258e5b71d..9cb6c94f43 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -116,6 +116,13 @@ export const styles = theme => {
       '&$disabled': {
         opacity: 1, // Reset iOS opacity
       },
+      '&:-webkit-autofill': {
+        animationDuration: '5000s',
+        animationName: '$auto-fill',
+      },
+    },
+    '<strong i="6">@keyframes</strong> auto-fill': {
+      from: {},
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
@@ -239,17 +246,20 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
   }, [muiFormControl, disabled, focused, onBlur]);

+  const onFilled = muiFormControl && muiFormControl.onFilled;
+  const onEmpty = muiFormControl && muiFormControl.onEmpty;
+
   const checkDirty = React.useCallback(
     obj => {
       if (isFilled(obj)) {
-        if (muiFormControl && muiFormControl.onFilled) {
-          muiFormControl.onFilled();
+        if (onFilled) {
+          onFilled();
         }
-      } else if (muiFormControl && muiFormControl.onEmpty) {
-        muiFormControl.onEmpty();
+      } else if (onEmpty) {
+        onEmpty();
       }
     },
-    [muiFormControl],
+    [onFilled, onEmpty],
   );

   useEnhancedEffect(() => {
@@ -311,6 +321,12 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
   };

+  // Check the input state on mount, in case it was filled by the user
+  // or auto filled by the browser before the hydration (for SSR).
+  React.useEffect(() => {
+    checkDirty(inputRef.current);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleClick = event => {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();
@@ -354,6 +370,10 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     };
   }

+  const handleAutoFill = () => {
+    // Provide a fake value as Chrome might not let you access it for security reasons.
+    checkDirty({ value: 'x' });
+  };
+
   return (
     <div
       className={clsx(
@@ -399,6 +419,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
           defaultValue={defaultValue}
           disabled={fcs.disabled}
           id={id}
+          onAnimationStart={handleAutoFill}
           name={name}
           onBlur={handleBlur}
           onChange={handleChange}

एक भाग https://github.com/tocco/tocco-client/commit/cb3b9b59994380f17c6650ffe4b63f96948072b6 से प्रेरित है

मैंने इस फिक्स को सामग्री-यूआई सैंडबॉक्स (डॉक्स पेज) के साथ स्थानीय रूप से परीक्षण किया और जब मैं इसे लागू करता हूं तो समस्या को पुन: उत्पन्न नहीं कर सकता।
यह मुद्दा था:

इस फिक्स के साथ मैं न तो https://github.com/mui-org/material-ui/issues/14427#issuecomment -530503051 के भाग B में बताए गए समान मुद्दे को पुन: प्रस्तुत नहीं कर सकता
यहाँ देखा गया:

@oliviertassinari @ eps1lon मैंने अपने व्यवसाय एप्लिकेशन में v4.4.3 का परीक्षण किया और मुझे त्रुटि नहीं दिखाई दी। तो ऐसा लगता है कि पैच (हालांकि शायद सबसे सुरुचिपूर्ण नहीं) ने इस मुद्दे को हल किया और मैंने हैक को हमेशा हटाए गए लेबल को हटा दिया ( InputLabelProps={{ shrink: true }} जो वास्तव में एक अच्छा हैक नहीं था, क्योंकि इनपुट भले ही उठे थे खेत खाली थे)।

@oliviertassinari @ eps1lon
मेरे पास अब दुर्भाग्य से एक नया मुद्दा है। जब ऑटोफिल के साथ खेल रहा हो। उपयोगकर्ता का चयन करें, फिर पासवर्ड हटाएं, फिर पुन: चयन करने का प्रयास करें (या ऐसा ही कुछ) लेबल उभरे हुए रहें, भले ही फ़ील्ड रिक्त हों: -

->

क्रोम: 77
उबंटू: 18.04

@oliviertassinari @ eps1lon @croraf मैंने अपने आवेदन में इसका परीक्षण भी किया है कि अंक अब मौजूद नहीं है। आपकी सहायता के लिए धन्यवाद।

@garygrubb यह देखने की कोशिश करें कि क्या आप उपर्युक्त पोस्ट में बताई गई सूक्ष्म त्रुटि को देखते हैं।

@coraf हां मैं डेस्कटॉप क्रोम संस्करण 76.0.3809.132 (आधिकारिक बिल्ड) (64-बिट) पर एक ही मुद्दे को पुन: पेश करने में सक्षम था। मोबाइल संस्करण और फ़ायरफ़ॉक्स ठीक लग रहे हैं।
यदि आप इसके लिए एक नया मुद्दा खोलते हैं, तो कृपया मुझे टैग करें ताकि मैं साथ चल सकूं।

निम्नलिखित मदद करेगा?

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 439e8afa7..f0ab8bb66 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -373,6 +373,12 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
   }

   const handleAutoFill = () => {
+    // The change event is correcty triggered when the input is focused.
+    // There is no need to detect autofill.
+    if (fcs.focused) {
+      return;
+    }
+
     // Provide a fake value as Chrome might not let you access it for security reasons.
     checkDirty({ value: 'x' });
   };

@oliviertassinari ठीक है, मुझे मुई डॉक्स पृष्ठ पर शेष अंक का लगातार पुनरुत्पादन मिला।
ध्यान दें: यह शेष मुद्दा वास्तव में एक छोटी सी बात है, और शायद यह नहीं है कि मूल मुद्दा क्या था की तुलना में, उच्च पुजारी।

1. स्थानीयहोस्ट के लिए क्रोम स्टोर क्रेडेंशियल (उपयोगकर्ता नाम और पासवर्ड) बनाएं : 3000

2. रीफ़्रेश करें http: // localhost : 3000 / घटक / पाठ-फ़ील्ड # उल्लिखित
   मुझे कुछ ऐसा मिलता है:
   

3. ईमेल फ़ील्ड को मैन्युअल रूप से हटाएं लेकिन पासवर्ड अभी भी स्वत: पूर्ण है
   

4. ईमेल फ़ील्ड पर क्लिक करें। Chrome आपको उस पृष्ठ के लिए सहेजे गए उपयोगकर्ताओं के साथ ड्रॉपडाउन दिखाएगा ( localhost:3000 )
5. ड्रॉपडाउन में प्रस्तावित उपयोगकर्ताओं में से एक पर होवर करें लेकिन उसका चयन न करें। Chrome आपको फ़ील्ड में उस उपयोगकर्ता चयन का पूर्वावलोकन दिखाएगा।
6. इसे बंद करने के लिए ड्रॉपडाउन से दूर क्लिक करें।

आपको यह स्थिति मिलेगी:

@oliviertassinari आपका अतिरिक्त फिक्स मेरे द्वारा वर्णित शेष समस्या को हल करने के लिए लगता है।

लेकिन मुझे इस मुद्दे का एक और स्वाद मिला है: डी
प्रजनन चरण ऊपर के समान हैं, लेकिन चरण 3 के बजाय भी पासवर्ड को मैन्युअल रूप से साफ़ करें:

1. उपयोगकर्ता नाम और पासवर्ड दोनों फ़ील्ड हटाएं

यह आपको अंत में निम्नलिखित परिणामी मुद्दा देगा

यह आपको अंत में निम्नलिखित परिणामी मुद्दा देगा

@ क्रॉस्फ़ ओह बॉय, मैंने इसे आते हुए नहीं देखा है! हाँ, यह समझ में आता है।

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 763ab105c..9dce66f9d 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -86,6 +86,7 @@ export const styles = theme => {
       // Make the flex item shrink with Firefox
       minWidth: 0,
       width: '100%', // Fix IE 11 width issue
+      animationName: '$auto-fill-cancel',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11
@@ -123,6 +124,9 @@ export const styles = theme => {
     '<strong i="9">@keyframes</strong> auto-fill': {
       from: {},
     },
+    '<strong i="10">@keyframes</strong> auto-fill-cancel': {
+      from: {},
+    },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
       paddingTop: 4 - 1,
@@ -380,9 +384,11 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     };
   }

-  const handleAutoFill = () => {
+  const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty({ value: 'x' });
+    checkDirty(
+      event.animationName.indexOf('auto-fill-cancel') !== -1 ? inputRef.current : { value: 'x' },
+    );
   };

   return (

से:

• https://github.com/klarna/ui/blob/v4.10.0/Field/index.jsx#L105 -L113
• https://codedaily.io/tutorials/69/Animated-Input-Label-with-Chrome-Autofill-Detection-in-React

4.4.2

4.4.3

प्रस्तावित पैच

@oliviertassinari , @croraf - उत्पादन में परीक्षण किया गया और यह उम्मीद के
कृपया मुझे किसी अन्य बग फिक्स में टैग करें जो आप चाहते हैं कि मुझे पॉडक्शन में परीक्षण करना चाहिए। मुझे मदद करके खुशी होगी।

सुनकर खुशी हुई।

डार्क थीम का समर्थन नहीं करता है?

@MAkerboom हम रंग को गहरा नीला होने पर विचार कर सकते हैं। क्या यह कुछ ऐसा है जिसे आप प्रयोग करना चाहते हैं?

@oliviertassinari जब तक रूपरेखा दिखाई दे रही है और यह अभी भी मेरे साथ पाठ के साथ पर्याप्त विपरीत है, ठीक है

@MAkerboom सबसे अच्छा तरीका है जिसके साथ मैं आ सकता हूं:

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index 71d0bcc94..4b681cba1 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -106,6 +106,12 @@ export const styles = theme => {
     /* Styles applied to the `input` element. */
     input: {
       padding: '27px 12px 10px',
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
+        WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
+        borderTopLeftRadius: 'inherit',
+        borderTopRightRadius: 'inherit',
+      },
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index f60c4e5d5..376e37ba8 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -65,6 +65,11 @@ export const styles = theme => {
     /* Styles applied to the `input` element. */
     input: {
       padding: '18.5px 14px',
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
+        WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
+        borderRadius: theme.shape.borderRadius,
+      },
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {

कया ये तुमहारे लिये ठीक है? क्या आप पुल अनुरोध सबमिट करना चाहते हैं? :)

काफी बेहतर! धन्यवाद। पीआर बनाने की कोशिश करेंगे

<AutoComplete/> का उपयोग करते हुए मैंने इस बग को देखा। जब यह ध्यान केंद्रित करता है तो पाठ क्षेत्र इसके लेबल को "सिकोड़" नहीं सकता है। मैंने इसे फ़ायरफ़ॉक्स और क्रोम में देखा (अन्य ब्राउज़रों का परीक्षण नहीं किया)। V4.5.0 से v4.5.2 तक अपग्रेड करने से समस्या ठीक हो गई। मेरा मानना ​​है कि इस मुद्दे से जुड़े पीआर जिम्मेदार हैं, इसलिए धन्यवाद!

एफडब्ल्यूआईडब्ल्यू यहां एक थीम ओवरराइड है जो क्रोम को ऑटोफिल्ड इनपुट पर कस्टम रंग प्रदर्शित करने से रोकती है:

theme = {
    overrides: {
        MuiInputBase: {
            root: {
                fontFamily: '"Lato", serif',
                "& input": {
                    "&:-webkit-autofill": {
                        transition:
                            "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
                    },
                    "&:-webkit-autofill:focus": {
                        transition:
                            "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
                    },
                    "&:-webkit-autofill:hover": {
                        transition:
                            "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
                    },
                },
            },
        },
    }
}

@armellarcier साझा करने के लिए धन्यवाद। मैं कस्टम रंगों को हटाने के साथ सावधान रहूंगा, मुझे लगता है कि यह उपयोगकर्ताओं की मदद करने के लिए है। यह एक सुरक्षा दृष्टिकोण से भी दिलचस्प हो सकता है, यह जानने के लिए कि क्या आप सही डोमेन नाम पर हैं, फिशिंग नहीं की जा रही है (अन्यथा ऑटोफ़िल काम नहीं करता है)