Level 73
Are you sure it is Livewire that unhides the button, or your custom script is executed? Put a console.log within the condition and make sure that it is not your JS part that unhides the button.
Nov 22, 2020
19
Level 27
Livewire unhides hidden button
<button id="butShare" class="button" hidden>
I have a normally hidden button that becomes visible if the browser supports a certain API, however the button is always visible when inside a Livewire component.
- Anyone knows if this unhiding is by design of Livewire?
- In normal blade, I check for
if (navigator.share) {...to unhide the button, how do we integrate this into Livewire?
Level 27
Quite sure it is not my javascript. I tested by taking out my javascript after your reply.
It worked in a normal blade component. And started becoming visible after I placed them into a Livewire component.
Before I started the discussion, I was trying to manipulate the display: none CSS in my developer tools and it gets deleted once I entered it. I'm not sure if Livewire is the culprit, but all things point to it.
Level 73
@laracoft but there is not attribute in an html element called hidden is it maybe a custom class that needs to be part of the class attribute instead?
<button id="butShare" class="button hidden">
Level 27
I just found out the unhiding is caused by having wire:poll.5s in part of my Livewire component. Do you know why a line like this will cause unhiding?
Level 27
hidden attribute exists https://www.w3schools.com/tags/att_hidden.asp
Level 73
@laracoft just tried this:
<div wire:poll>
<h1>{{ now() }}</h1>
<button hidden>Test</button>
</div>
in my project, and it works as it should. So I don't know how your hidden attribute is gone.
Level 27
Just to clarify, hidden attribute is still there in my HTML when I browse it using Dev tools, it just has no effect.
Let me try your code. Thanks.
Level 73
The browser support is also mentioned in the link that you shared with me for the attribute, so make sure you are trying on a supported browser.
Level 27
Can help test this? And explain what might be causing it?
fa fa-share is from fontawesome, but I doubt it matters.
<div wire:poll.5s>
<h1>{{ now() }}</h1>
<button hidden>Test</button>
<button id="butShare" class="button" hidden>
<span class="icon"><i class="fa fa-share" aria-hidden="true"></i></span><span>Does not hide</span>
</button>
</div>
Level 73
Here is what I see https://snipboard.io/mq3XIg.jpg
Level 27
My versions
Chrome Version 86.0.4240.198 (Official Build) (64-bit)
livewire/livewire v2.3.2
laravel/framework v8.15.0
Same as yours?
Level 27
I identified the culprit, class="button" from Bulma CSS that I'm using. This is odd.
Level 73
Well, there you go :) apply either a class or an id that will set the display:none.
Level 73
Just slightly newer version of Chrome (Version 87.0.4280.67 (Official Build) (x86_64)) the rest is the same, and I am on a Mac. But this is not a way to debug it my friend.
I would comment all the other scripts just to make sure nothing is interfering with the page.
Level 27
What's a better way to debug? I'm pretty sure I took out all my scripts already and working off the minimal example.
It seems to be the way Chrome handles display: block and hidden attribute. It chooses to show it. Can help confirm? Thanks.
Level 73
Hm, I really don't think it is Chrome that overrides manually neither the style nor the hidden attribute. As you said it is Bulma most probably that applies display:visible or whatever to the class. So an id has a heavier value than a class so if you add id to the button, and then put #id_name { display:none } in your CSS, the button should be hidden, or apply the style directly on the button
<button id="butShare" style="display:none" class="button" hidden>
<span class="icon"><i class="fa fa-share" aria-hidden="true"></i></span><span>Does not hide</span>
</button>
Level 27
I need to toggle the visibility based on the brower's API support. So I plan to use Bulma's is-hidden class.
My Chrome shows the button for this
<button style="display:block" hidden>
Isn't this overriding hidden? It is just very odd that this did not happen while I was using a normal blade component.
Level 73
It does not make sense to me, I cannot debug it locally. Glad you found out what causes it, so just try out everything, not sure what else to say.
Level 27
Ok, thanks for your help. It moved me forward.
Please or to participate in this conversation.