How to disable autofill on ember form field

Question

I have a form for updating the details of alumni in ember using RESTful api. Is it possible to prevent the form from auto filling the data I previously entered in the form corresponding to another record in the model?

I have these codes in my update route directory(I am using pod-structure):

controller.js

# app/alumnis/update/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default Controller.extend({
  firstName: null,

  actions: {
    updateAlumni(value) {
      let firstName = get(this, 'firstName');
      if(firstName) {
        firstName = firstName.charAt(0).toUpperCase() + firstName.slice(1).toLowerCase();
        this.get('store').findRecord('alumni', value).then(function(alumni) {
          alumni.set('firstName', firstName);
          alumni.save();
        });
      }
      this.transitionToRoute('alumnis.show', value)
    },
  },
});

route.js

# app/alumnis/update/route.js
import Route from '@ember/routing/route';
import { set } from '@ember/object';

export default Route.extend({
  model(params) {
    return this.store.findRecord('alumni', params.id);
  },

  setupController(controller, model) {
    set(controller, 'alumni', model);
  }
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=firstName placeholder=alumni.firstName autocomplete="off"}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni" alumni.id}}>Submit</button>
</form>

router.js

# app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('alumnis', function() {
    this.route('show', {path: '/:id'});
    this.route('add', {path: '/add'});
    this.route('update', {path: '/:id/update'});
  });
});

export default Router;

On the first rendering of update route after every reloading, no form fields are filled automatically. But, once we enter data to the firstName input field, it is rendered to form field in update page of any other record in the model alumni.

what have you tried? this is typically a browser feature or browser extension feature, and it's up to the browser to decide whether or not to respect `autocomplete="off"` on the form / inputs. https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion — NullVoxPopuli, Aug 20 '18 at 20:16
@NullVoxPopuli , I have tried turning `autocomplete="off"` and access the `route` in incognito mode, but the field are rendered even before clicking the input box in the form — naseem, Aug 20 '18 at 20:26
The field is rendered to previously entered value in the `update` route of any record in the model `alumni`. Placeholder value is the actual value from the record but the field is autofilled to data given as input when this route is previously visited. — naseem, Aug 20 '18 at 20:52
if you try a totally different browser does it still autofill? — NullVoxPopuli, Aug 20 '18 at 20:57
I'm just wondering if this is an app logic issue or browser autofill/autocomplete — NullVoxPopuli, Aug 20 '18 at 20:57
I tried it using both chrome and safari. Now, I am able to achieve it. And thank you for the comments — naseem, Aug 20 '18 at 21:53

Trenton Trama · Answer 1 · 2018-08-20T21:48:24.407

Properties that are set in a controller in ember will remain set when you re-navigate to the page.
The logic you've shown, leads me to believe you don't even need the controller. You are modifying a model property, saving it and transitioning. You were doing a round-about way of updating the record, The alumni record was your model, yet you were trying to re-fetch it from the store.

route.js

# app/alumnis/update/route.js
import Route from '@ember/routing/route';
import { set,get } from '@ember/object';

export default Route.extend({
  model(params) {
    return this.store.findRecord('alumni', params.id);
  },

  updateAlumni() {
      let changedAttrs = get(this, 'model').changedAttributes();
      if (changedAttrs.firstName) {
        let firstName = get(this, 'model.firstName').toLowerCase().capitalize();
        set('model.firstName', firstName);
      }
      get(this,'model').save()
      this.transitionToRoute('alumnis.show', get(this,'model'))
    }
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=model.firstName placeholder=alumni.firstName autocomplete="off"}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni"}}>Submit</button>
</form>

I am getting an error: Assertion Failed: You attempted to define a `{{link-to "alumnis.update"}}` but did not pass the parameters required for generating its dynamic segments. Expected to find: `controller:alumnis/update` within `amp/alumnis/update/controller` but got `undefined`. Did you forget to 'export default' within `amp/alumnis/update/controller`?" — naseem, Aug 20 '18 at 21:17
After changing the `updateAlumni()` function in the `controller.js` file and using `value=alumni.firstName` in `template.hbs` I was able to avoid the issue. — naseem, Aug 20 '18 at 21:47
Do you still have the controller file sitting around? Are you passing an id or model as the second parameter for link-to? — Trenton Trama, Aug 20 '18 at 22:06
I am passing the `alumni.id` as second argument for link-to. — naseem, Aug 20 '18 at 22:24

naseem · Accepted Answer · 2018-08-21T04:04:06.550

I was able to resolve the issue by changing the below codes:

controller.js

# app/alumnis/update/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default Controller.extend({
  firstName: null,

  actions: {
    updateAlumni(value) {
      let alumni = get(this, 'alumni');
      let changedAttrs = alumni.changedAttributes();
      if(changedAttrs.firstName) {
        let firstName = alumni.firstName.toLowerCase().capitalize();
        alumni.set('firstName', firstName);
        alumni.save()
      }
      this.transitionToRoute('alumnis.show', value)
    },
  },
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" autocomplete="off" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=alumni.firstName}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni" alumni.id}}>Submit</button>
</form>

No change in app/alumnis/update/route.js

How to disable autofill on ember form field

2 Answers2