title: Why credit card autofill doesn't work when production build but it works with npm start in my react application?
body: <p>I have a very simple form in my react application to fetch the user credit card information as follows.</p>
  <pre><code>&lt;form autocomplete=&quot;on&quot;&gt;
      &lt;input class=&quot;control&quot; id=&quot;card_number&quot; type=&quot;tel&quot; name=&quot;card_number&quot; autocompletetype=&quot;cc-number&quot;/&gt;
      &lt;input name=&quot;cc-exp-month&quot;/&gt;
      &lt;input name=&quot;cc-exp-year&quot;/&gt;
      &lt;input name=&quot;cc-exp&quot;/&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I also tested in a &quot;react-way&quot;
  <a href="https://i.stack.imgur.com/B10ss.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B10ss.png" alt="enter image description here" /></a></p>
  <p>I want the browser (safari in this case) to show the credit card options like the image below.</p>
  <p><a href="https://i.stack.imgur.com/Juyf3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Juyf3.png" alt="enter image description here" /></a></p>
  <p>Interesting fact:
  I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with <code>npm start</code> (as per the image above).
  However, if I run <code>npm run build</code> and serve the ./build folder the credit card options don't show up.</p>
  <p>That's what I still don't understand, why the same code works in one way but it doesn't work in another way?</p>
  <p>PS1: I'm testing in both cases with HTTPS.</p>
  <p>PS2: I tested different input names, autocomplete=&quot;cc-number&quot; etc. But none of them worked. As the code works with <code>npm start</code>, I don't think is a code issue.</p>