Our ‘Features’ drop down renders as open when we load the page. It was set to ‘show as open’ for editing but unchecking that either isn’t being published or isn’t having the effect I thought it would. Is this a bug or something we’re doing wrong?
@Micheola took a quick look, I think the problem came from using context.showOpen() as the condition to show/hide. Without being able to see the method itself it is hard to debug, but it was probably being called at a time you didn’t necessarily expect.
That being said, I noticed that the dropdown has a state value of state.dropdownMenuActive, so I changed the style conditionals to be based off of that instead and it seems to fix the problem.
Please take a look and see if that makes sense for the logic of your setup and works for you!
Ah thanks Tim, that’s really good of you. A couple of people are working on this and none of us are that familiar with Builder so really it’s helpful to have an expert look over it for us.
1 Like
We’re having this same issue in our project, the dropdown renders as open on page load of the live site and doesn’t close until you trigger a mouseleave event on the parent div. I noticed that the mouseenter/mouseleave events are causing inline styles to be added to the dropdown div that show and hide it, and when the page first loads, these inline styles aren’t present, so that’s why it’s displaying. I tried making the changes suggested by @TimG but it didn’t resolve the issue.
What’s strange is that the issue only happens on the Live Site - in the Builder UI and on the View Current Draft page this is not an issue.
@TSIA_SN it might just be good to set an initial state or something to account for what I assume is a timing issue. Could you share a link to the builder content in question (something like \ builder.io/content/CONTENT_ID_HERE) and I can try to take a closer look
Where would I set the initial state? Here’s a link to the content:
@TSIA_SN ah, actually this might be another issue…I see your site is deployed to vercel?
We found an issue where on production vercel and some other hosting services seem to strip out one of our libraries that helps with setting some initial states. You can see the work around to fix it here:
What version of our React SDK are you currently using? It might also resolve if you update to the latest (2.0.11)
Can confirm that using the latest version of the Builder sdk in combination with the state.dropdownMenuActive changes resolved the issue.
Is there any chance that the Dropdown template could be updated? Or should we create our own template from the Dropdown template?
Edit: After deploying to a non-preview branch in Vercel it seems the issue remains even with the latest Builder version, will try the dependency workaround
We are using nuxt and getting into the same issue. Is there any update on this or any information on how to resolve this in nuxt?