bem / bem-react

A set of tools for developing user interfaces using the BEM methodology in React
http://bem.github.io/bem-react
Other
439 stars 64 forks source link

@bem-react/core: Recreated component after modifier changed #589

Open yarastqt opened 3 years ago

yarastqt commented 3 years ago

Info

If we have complex modifier, and we enabled this dynamically then component will be created again, and focus will be removed from component.

Example

modifier:

export const withClear = withBemMod('Component', { clearable: true }, (Component) => {
  return function WithClear() {
    return <Component icon={<div>X</div>} />
  }
})

usage:

function App() {
  const [clearable, setClearable] = React.useState(false)

  React.useEffect(() => {
    setTimeout(() => setClearable(true), 1000)
  }, [])

  return (
    <Component  clearable={clearable} />
  )
}

Expected behavior

Component should update without focus side-effects.

yarastqt commented 3 years ago

I think we should try pass "internal key" for nextProps and say for react not update this component from initial.