search

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
http://downshift-js.com/
MIT License
12.01k stars 930 forks source link

CodeSandbox examples broken? #1570

Open dlong500 opened 5 months ago

dlong500 commented 5 months ago

I was just using the downshift CodeSandbox examples a few days ago, but now (at least for me) it appears they have removed the "current module view" so the only thing that will render is the entry page titled "downshift examples" no matter what file is in the editor. Am I going crazy or did CodeSandbox just roll out an update that breaks/removes the current module view?

silviuaavram commented 5 months ago

There seems to have been a change in the codesandbox interface. I tried to locate the equivalent button to switch the view but no luck so far.

dlong500 commented 5 months ago

So, in further testing, it appears that my codesandbox account was set to use their beta editor, and that editor appears to not have the module view (at least as of now). I was able to get it working again with the following steps:

1) In codesandbox, open the menu in the upper left corner and choose Settings > Experiments > Open dashboard Preferences and then disable Sandbox beta editor 2) In a new tab or window, open the URL from the examples: https://codesandbox.io/s/github/kentcdodds/downshift-examples (note the /s/ in the URL).

It's worth mentioning that refreshing the non-working editor after disabling the beta editor is not enough, as any codesandbox URL that starts with https://codesandbox.io/p/ appears to use the new editor no matter what settings are defined. If you DO have the beta editor setting enabled then any URL with the original structure redirects to the new /p/ type URL.

What's extra odd is that the beta editor appears to be the default if you aren't signed in to codesandbox (so no workaround as the page will always redirect to the /p/ type URL.

It remains to be seen if this workaround will keep working and/or if they will end up adding the module view to their newer interface. I'm a bit perplexed that I haven't found many people mentioning this issue in web searches as I'm sure it would affect a number of github projects that have made use of the module view functionality for their examples. In the meantime it might be useful to add a note to the examples page about the issue.

dlong500 commented 1 month ago

Codesandbox added support for a moduleview=1 query parameter in the last couple weeks (see: https://github.com/codesandbox/codesandbox-client/discussions/8350). This adds back the functionality that is necessary for the examples to work (without requiring a user to fiddle with a toggle button in the UI).

At this point it will require users to manually append the moduleview=1 query parameter to the URL until the possibility of flagging the codesandbox project to automatically enable that mode exists. All you need to do to get this working is make sure the moduleview=1 query parameter is present. So for example starting with the main index page it would be: https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples/tree/master/?file=%2Fsrc%2Findex.js&moduleview=1

After that the moduleview parameter will be persistent as you navigate through the example files, and in my experience it also immediately loads a newly selected page without requiring a manual refresh.

At some point we can hopefully get the links to the examples codesandbox updated with the the moduleview parameter so it will already be operating in the correct mode (or update the codesandbox settings with a mode option if it becomes available).