Uniforms: form autoFocus

[JWDobken]

For improved UX is it possible and desirable to implement an autoFocus option variable for AutoForm?

Which would be used like:

<AutoForm
    autoFocus
    schema={Books._collection.simpleSchema()}
    onSubmit={doc => console.log(doc)}
      />

Which would put the cursor on top of the form when it is created

[radekmie]

_Take a look at #68._

It's impossible _(in a way)_ because there is no need, that field will have any input - for example, an icon or a table might be a field too. There is inputRef props, that works exactly in the same way as ref in React, but it is wired to HTML input _(if any)_ - you can use it to trigger .focus() on it.

[JWDobken]

Ah thanks... but unfortunately I am not able to get this to work.
I gave my AutoField the prop inputRef:

<AutoField inputRef='insertName' name='name' />

but I get:

Uncaught Error: Stateless function components cannot have refs.

[radekmie]

Which version of React are you using? And how does your component look like? Also, which field should be rendered by this AutoField?

[JWDobken]

I'm using Meteor1.4 with react 15.4.2

The AutoForm component:

<AutoForm
    schema={LibItems._collection.simpleSchema()}
    onSubmit={doc => this.insertItem(doc)}
    model={this.props.libitem}
    placeholder={true}
    >
        <AutoField inputRef="insertName" name='name' label="Operation name" />
        <SubmitField />
      </AutoForm>

And the schema:

import SimpleSchema from 'simpl-schema';
...
LibItems.schema = new SimpleSchema({
  name: String
  }
})

[radekmie]

OK, and you render this AutoForm inside of a class or a function? As I remember, it's not possible to have a ref in a functional component.

[JWDobken]

So much thanks for your effort, I'm brand new to React.
If use the autoform like this, Im not 100% sure if this is called a class or a function:

  renderItem() {
    return (<AutoForm ...>
    ....
   </AutoForm>
    )
  };

render() {
    return (
      <div className="container">
          {this.renderItem()}
      </div>

[radekmie]

Well, to be honest, I'm also not sure. Maybe try passing a function instead of a string _(ref can be a function too)_? If you have some time, please fiddle with it - I'll try to take a look at it later.

[JWDobken]

thanks I will.

In the mean time I have two other questions:

• Is it possible to build a read only form? (for presentation only)
• can the value of an input box be initialized and changed then by the user?

[radekmie]

• No, there is only disabled state.
• Yes, just set it in the model.

In the future, please create another issue or ask questions like this on our Gitter.

[radekmie]

_(ping)_ I didn't have much time recently and I probably won't in the next few days, but I guarantee, that I'll get to it within next two weeks.

[radekmie]

It have to be a problem with your form component. This:

<AutoForm schema={new SimpleSchema({x: String})}>
    <AutoField name="x" inputRef={x => x.focus()} />
</AutoForm>

Focuses correctly.

[thebarty]

Note that the x-reference might NOT be available in some cases.

I just had a weird issues using this with gatsby (static site generator).

So I created this little wrapper…

/**
 * Autofocus Uniform-Input.
 *  see https://github.com/vazco/uniforms/issues/174
 * Usage:
 * ```
 *   <AutoField name='email' inputRef={inputRefAutofocus}/>
 * ```
 */
export const inputRefAutofocus = (inputRef) => {
  if (inputRef) {
    inputRef.focus()
  }
}