Issues in catalog pages under certain circumstances

[kfranqueiro]

These issues occur depending on how you load the page, e.g. navigating directly to a component's page or refreshing the page, vs. navigating from the front page.

• [ ] Chips page: choice/filter chips don't reflect selected state when you interact with them
• [ ] Radio and Theme pages: the first radio in each group should be initially checked, but they're both unchecked

[thdk]

Any updates or workaround so far for this?

I can see the same behavior in my react app when using chip set component.

Everything works when chips are not displayed on page load. Example, the user needs to click a link to go the next page (in a single page app!). On that second 'page' chips will be working correctly.

However, when I press F5 to refresh the single page app from the current url, that second page will be reloaded and the chipset will not be initiated.

The exact same things is happening on the catalog pages.

If you open the catalog overview page first, and click on the chips tile, the chips demo page will be visible and chips will be working. However, when you refresh that page, or when you navigate directly the the chips demo page the chips are not working.

This makes the chips component currently not very usable in react apps.

[kfranqueiro]

Out of curiosity are you using the vanilla MDC Web components in a react app, or are you using MDC React?

The catalog uses the vanilla components and I'm suspecting that we just have some mistakes in the catalog code with regard to lifecycle management that's causing this.

[thdk]

@kfranqueiro I'm using too the vanilla MDC web components. I was blaming myself untill I saw this issue and got some hope it wasn't my fault after all. But now I read you comment and I've lost my hope ;)

I'll dig into it more tonight, but I'm still very new with react.. Meanwhile I'll keep an eye here in case someone else finds the cause of this.

[thdk]

I finally had some time to look at this.

I used the componentDidMount lifecycle method to init the MDCChipSet however, this was not called when the component updates (aka receives chips from the state)

I reinitiated the MCDChipSet using componentDidUpdate and now the chips are working as expected.

export class ChipSet extends React.Component<IChipSetProps> {
    private chipset: any;
    private mdcChipSet: React.RefObject<HTMLDivElement>;
    constructor(props: IChipSetProps) {
        super(props);
        this.mdcChipSet = React.createRef();
    }

    render() {
        let classNames = ["mdc-chip-set"];
        switch (this.props.type) {
            case "choice":
                classNames.push("mdc-chip-set--choice");
                break;
            case "filter":
                classNames.push("mdc-chip-set--filter");
                break;
            default:
                break;
        }
        return (
            <div className={classNames.join(" ")} ref={this.mdcChipSet}>
                {this.props.chips}
            </div>
        );
    }

    componentDidUpdate() {
        this.chipset.destroy();
        this.chipset = new MDCChipSet(this.mdcChipSet.current);
    }

    componentDidMount() {
        this.chipset = new MDCChipSet(this.mdcChipSet.current);
    }
}

[jimyhdolores]

Do you have a demo for this?