autofocus=true focuses the field when other form fields are edited about patternfly-yew HOT 7 CLOSED

Update: Extracting the autofocus form component into a separate component does the trick:

#[derive(Properties, PartialEq)]
struct TitleInputProps {
    onchange: Callback<String>,
    value: String,
}

// Workaround for https://github.com/patternfly-yew/patternfly-yew/issues/145:
#[function_component(TitleInput)]
fn title_input(TitleInputProps { onchange, value }: &TitleInputProps) -> Html {
    html! {
        <FormGroup required=true label="Title">
            <TextInput required=true autofocus=true {onchange} value={value.clone()} />
        </FormGroup>
    }
}

This allows me to put a validation on the field too, without as much clutter, but it still feels weird.

from patternfly-yew.

There might be an issue with the initialization of the "focus" part. Re-rendering might cause that to be re-executed. Although I haven't experienced that myself.

from patternfly-yew.

Hm, I notice that the input_ref on TextInput has a #[prop_or_default] annotation, and I'm not passing a r#ref into the component... could it be that when the containing component re-renders, the node reference gets re-set due to the default call, which changes the input_ref value into something non-equal, which re-triggers the effect in this line?

from patternfly-yew.

...aaand confirmed, this goes away when I set r#ref={node_ref} (using a thing I created with use_node_ref() as normal), the issue goes away. I think it might be dangerous to use Default::default() with NodeRefs?

from patternfly-yew.

I think it might be dangerous to use Default::default() with NodeRefs?

Maybe :) … Can you come up with a PR?

from patternfly-yew.

I think I have an idea how to fix this - we can use use_effect_with((), move ...), which should run only on first render. Or use the autofocus prop as the criteria for when to re-run. I'll experiment and send something!

from patternfly-yew.

That was easy! #147 (:

from patternfly-yew.