Input looses focus

Found your library via Stackoverflow, it’s very useful for my current project, so thanks for releasing it as Open Source Software!

I’ve copied your userlist-example over to my build-env and it works, mostly. There’s just one issue - I loose focus after every letter entered in the input-fields.

I thought the problem might be caused by the modal-overlay - but after implementing nestedLink-methods in my own project, I have the same issue with loosing focus in the input-fields. And I don’t use a modal. After every letter I enter, the cursor is gone and I have to click in the input-field again to enter the next letter.

The issue is probably caused by the linkToObject.at-method, which I’m using to autosubmit the input-value in conjunction with onChange, in the first input-field in this example:

render() {
    const linked = Link.all ( this, 'sequence', 'command', 'info' ),
          infoLink   = this.props.sortData.at( 'info')

    const setValue = (x, e) => e.target.value

    return (
      <div { ...this.props }>
        <span className="sequence-order">{linked.sequence.value}</span>
          <input value={ linked.info.value } onChange={ infoLink.action( setValue ) }/>
          <input valueLink={ linked.info }/>
      </div>
    );
  }

The issue doesn’t appear in the second-input-field, where I’m using a “simple” valueLink. But since I don’t want to add a submit-button to commit its value to the parent, I prefer the more elaborate mechanism with onChange.

I’m on:

• react@15.1.0
• react-dom@15.1.0

[gaperton]

Btw. With my recent changes, you can shorten this:

    const jointLink = Link.value( linked.info.value, x => {
      linked.info.set( x );
      infoLink.set( x);
    });

to this:

    const jointLink = linked.info.onChange( x => infoLink.set( x ) );

Thank you for your input. Hope you’ll enjoy the library. Let me know if there will be some other problems.

[gaperton]

This Sortable component is very tricky. I can’t quickly understand how it works.

What about general sorting, React needs to know that element is moved. So, every element must have persistent index generated once and used as key in react list.

like this:

const list = [{ name: 'a', _id : 0}, { name: 'b', _id: 'whatever' }, ... ];

In your code, I think it should be enough to do it when you fetch elements from the server. Then, no matter which permutation made on the list, React knows where every particular element is located, and should be able to preserve state.

So, you’re supposed to generate list like this:

list.map( element => <div key={ element._id} > ... </div>

Id just must be unique value on this DOM level. If you already have something unique in the element (like image url) you can just use it as key.

It should work in the same way with link.map as well as with regular array.map. But again, this Sortable thingy does some dark magic in rendering, so I’m not completely sure if what I’m talking about is the case.