Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updateOption(value, data) doesn't trigger a re-render #87

Closed
mattgodbolt opened this issue May 15, 2021 · 6 comments
Closed

updateOption(value, data) doesn't trigger a re-render #87

mattgodbolt opened this issue May 15, 2021 · 6 comments
Labels
bug Something isn't working

Comments

@mattgodbolt
Copy link

Describe the bug
My option renderer uses a field in the data to customize the option's look. Calling updateOption(value, data); doesn't cause a re-render. I have a click handler to toggle a "is favorite" star on options.

Expected behavior
Ideally I could mutate the data associated with a value and then force a re-render. Calling removeOption() / addOption of the same data, or clearCache() or refreshOptions() all fail to notice the change in data and call the render.option() function.

@mattgodbolt mattgodbolt added the bug Something isn't working label May 15, 2021
@oyejorge
Copy link
Member

I think the problem is because the option still exists in the dropdown DOM ...

@oyejorge
Copy link
Member

Should be fixed now, I'll get a new release out shortly

@mattgodbolt
Copy link
Author

Wow that's amazing! Thanks!

If it's helpful, I'm currently having to both manipulate the DOM and also have a render() that does the same: https://github.com/compiler-explorer/compiler-explorer/blob/d23e71c4dde76c5f6fcebdbcc15b46295b73355d/static/compiler-picker.js#L85-L124

I'm hoping I can "just" fiddle the data associated with an element and then say "update!". This is potentially warty as in this case I'm maipulating which groups an item is in.

@mattgodbolt
Copy link
Author

(which of course now I look at your username you already knew hahah!)

@oyejorge
Copy link
Member

Just tested these tom-select changes and it's working well with the following changes to compiler-picker.js:

        this.tomSelect.updateOption(value,data);
        this.tomSelect.refreshOptions(false);

        // Ensure that the favorite class is removed from the option in the case where the user
        // un-favorites from the "favorite" group itself. After the refreshOptions, the element in
        // the "Favorite" group will be removed, so this option just gets the main element itself.
        //if (!isAddingNewFavorite) {
        //    optionElement = this.tomSelect.getOption(value);
        //    optionElement.classList.remove('fav');
        //}

@mattgodbolt
Copy link
Author

Nice! Thanks! And thanks for the comments in the PR in compiler explorer, too!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants