Using Publish and create new doesn't create a new ID

[laurenskling]

When saving a document using the Publish and create new button, the ID generator doesn't get populated with a new generated ID. It's empty, and read-only.

[d4rekanguok]

Thank you for reporting in, I'll try to reproduce the error & see if I can fix it.

[gurkodil]

It can be reproduced here:

https://custom-widgets.netlify.com/#/collections/posts/new

The componentDidMount method does not trigger on history changes, one solution could be to replace it with:

public componentWillReceiveProps(nextProps: WidgetProps) {
    const { value, field, onChange } = nextProps
    if (value) return
    // else generate id as previous in didMount...
}

I'm not really familar with lifecycle methods but I've tested it and it seems fine and fixes the bug. Or do you think there are some better solution?

[laurenskling]

Yeah, you are not leaving the page, so didMount will not run again. componentWillReceiveProps is deprecated (https://reactjs.org/docs/react-component.html#updating)

The component would be better off using constructor and https://reactjs.org/docs/react-component.html#componentdidupdate to see if the value turned empty to create a new ID

[gurkodil]

Ah good to know! 👍 I can send a PR tomorrow if @d4rekanguok haven't fixed it already.

[d4rekanguok]

@gurkodil please do!

[d4rekanguok]

The widget worked as expected now, thanks again @gurkodil @laurenskling! Published in @ncwidgets/id@0.5.1

[laurenskling]

I'm still seeing componentDidMount after installing 0.5.1 🤔

[d4rekanguok]

@laurenskling ugh, sorry that the issue still persists after the update. Could it be a cache issue on your side? I've checked the built js file here, the changes have been applied:

// https://unpkg.com/@ncwidgets/id@0.5.1/dist/control.js

class Control extends React.Component {
    constructor(props) {
        super(props);
        if (props.value)
            return;
        this.generateId();
    }
    generateId() {
        const { field, onChange } = this.props;
        const usePrefix = field.get('prefix');
        const useTimestamp = field.get('timestamp');
        const prefix = usePrefix ? usePrefix + '-' : '';
        const timestamp = useTimestamp ? Date.now() + '-' : '';
        const id = prefix + timestamp + shortid_1.default();
        onChange(id);
    }
    componentDidUpdate() {
        if (this.props.value)
            return;
        this.generateId();
    }
    render() {
        const { forID, classNameWrapper, setActiveStyle, setInactiveStyle, value, } = this.props;
        return (React.createElement("input", { type: 'text', className: classNameWrapper, style: {
                color: '#cdcdcd',
            }, value: value || '', id: forID, onFocus: setActiveStyle, onBlur: setInactiveStyle, disabled: true }));
    }
}
exports.Control = Control;

I've also tried the component in a codesandbox, and the component does generate a new id when using 'Publish and create new' option : https://codesandbox.io/s/netlify-cms-app-example-h5n43?fontsize=14&hidenavigation=1&theme=dark

[laurenskling]

Just installed it correctly! Must have been some caching issue https://shouldiblamecaching.com/

Thanks so much!