Skip to content
This repository was archived by the owner on Apr 1, 2021. It is now read-only.
This repository was archived by the owner on Apr 1, 2021. It is now read-only.

On componentDidMount, Binder doesn't have any child element #103

@ValentinJS

Description

@ValentinJS

When mounting a new Binder component, we sometimes want it to be focused on a specific element on initialization.

We tried to use the componentDidMount lifecycle method of the parent component, with a activeBinder(binderId, desiredEltId) but this doesn't seem to be working.

It appears that the activeBinder function will call computeResetBinder and this function will perform a check on the length of the children elements array length.
And this length is initialized at empty array, as can be seen in the buildBinderFromProps function.

Shouldn't the elements be filled with props.children in the buildBinderFromProps function ?
So that the activeBinder function would actually activate it on the specified element ?


Right now, we have to either do this in a setTimeout(..., 0) as it is done in the componentDidMount function of the Binder component.
i.e :

componentDidMount() {
  /* Workaround to make the desiredId focused by default */
  window.setTimeout(() =>
    activeBinder(binderId, desiredId);
  );
}

A less hacky way we found is to do it in the componentDidUpdate function, by first checking if the binder has a selectedId.

i.e :

componentDidUpdate() {
  if (!this.props.selectedId) {
    activeBinder(binderId, desiredId);
  }
}
// SelectedId is coming from the Binder's store
connect(() => ({
  selectedId: getCurrentSelectedId()(),
}))(MyComponent);

So what is the best way to handle this ?

Bonus question : could it be possible to give the desiredElementId to focus as an inline react props ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions