HTML properties overwritten

When using the <input type="password" {...form.$('username').bind()} /> syntax, the type seems to be overwritten with “text”, even though I didn’t specify it in form field definitions. It doesn’t seem right that form definition overrides the HTML. Am I missing something?

[foxhound87]

anyway the packages does not force you to use the bind() method. You can pass each props manually to the input. Or if you want to use bind() you can create a new default bindings rewriter/template omitting the type prop.

[foxhound87]

You can also create a component like this:

const MyTextField = observer(({
  field,
  type = 'text',
  placeholder = null,
  validatingText = 'validating...',
  // define other props and pass them to the bind() method
}) => (
  <MaterialTextField {...field.bind({ type, placeholder, validatingText })} />
));

and use it with explicit props definition:

<MyTextField type="password" />