Inferno: rendering selectbox options as (functional) component fails when using properties on select

Created on 16 Oct 2018  路  4Comments  路  Source: infernojs/inferno

Before migrating to V6 all works fine.
After migration dom.value = props.value; fails, because dom is null.

function updateChildOption(vNode, value) {
    var props = vNode.props || EMPTY_OBJ;
    var dom = vNode.dom;
    // we do this as multiple may have changed
    dom.value = props.value;
    if ((isArray(value) && value.indexOf(props.value) !== -1) || props.value === value) {
        dom.selected = true;
    }
    else if (!isNullOrUndef(value) || !isNullOrUndef(props.selected)) {
        dom.selected = props.selected || false;
    }
}

This happens when we will use our own (functional) component to render the option tag and use

  • a style object style={{}}
  • an id id="foobar"
  • ...
    within the select tag.
export const Combobox= (props) => {
    const FncOption = () => <option />;

    return <select id="foobar">
        <FncOption/>
    </select>;
}

Removing the property from the select tag or using \

This dosn't happen when using className.

export const Combobox= (props) => {
    const FncOption = () => <option />;

    return <select className="foobar">
        <FncOption/>
    </select>;
}

Thx

bug
Source
picture chrkulbe

All 4 comments

Hi @chrkulbe
Thanks for reporting the issue. I will look into it.

Havunen picture Havunen on 16 Oct 2018

@chrkulbe

This is indeed bug I will fix it and release a patch.

On a side note:

Its not good practice to declare Component inside another Component render if it was not just to show case the bug.

export const Combobox= (props) => {
// This component will be created again in every render of ComboBox, because it is different Component each time
    const FncOption = () => <option />;

    return <select className="foobar">
        <FncOption/>
    </select>;
}

This is better practice.

// Now because its hoisted, it will be created only once and updated when Combobox renders
const FncOption = () => <option />;

export const Combobox= (props) => {
    return <select className="foobar">
        <FncOption/>
    </select>;
}
Havunen picture Havunen on 16 Oct 2018

I know, it was only for the show case. :o)

chrkulbe picture chrkulbe on 16 Oct 2018
👍1

Fixed, 6.0.2 released :)

Havunen picture Havunen on 16 Oct 2018
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nassirdreffy picture nassirdreffy  路  4Comments
Elliot-Evans-95 picture Elliot-Evans-95  路  4Comments
yury-dymov picture yury-dymov  路  5Comments
EmilTholin picture EmilTholin  路  5Comments
dessalines picture dessalines  路  4Comments