Topic: Laravel Livewire breaks form components
Expected behavior MDBootstrap forms can be used together with Laravel Livewire
Actual behavior Layout problems occur with MDBootstrap forms and Laravel Livewire, which are not present with Bootstrap 5
Resources (screenshots, code snippets etc.) https://github.com/mdbootstrap/mdb-ui-kit/issues/1432
Here's an updated example on Laravel Playground: https://laravelplayground.com/#/snippets/93a7f7dd-57fa-44d8-a3d2-9dddda4c7378
This fixes the problems we've experienced so far, however, each call to .update() or .init() on the form-outline elements flashes the border which doesn't look too well, but I guess there is no way around this currently. 
You can work around this depending on the use-case with something like deferred updating, that doesn't sync the data on each input event, see https://laravel-livewire.com/docs/2.x/properties#deferred-updating
Sorry to complain, but you have a very frustrating support forum software. I lost my bug ticket the first time I tried to post it due to error 406. Now I just lost my message again because I was not logged in and once I click "Post" and sign in, the page reloads and the comment is gone.
So here we go again... The problem with the active class can be worked around by having @if(strlen($email ?? '') > 0) active @endif in the input class. What still doesn't work though is the border and this is caused by the form-notch div which is missing after Livewire does its magic. That div appears to be added by your JavaScript on page initialization as it also calculates some widths and uses them in inline styles on children of form-notch. Is it possible to programatically re-init inputs? I imagine this is mandatory also when dynamically creating input elements and adding them to the DOM after the page was loaded.
UNNdev pro premium priority commented 4 years ago
Nevermind, dynamic initialization is documented at the bottom of https://mdbootstrap.com/docs/standard/forms/input-fields/ :)
Hello,
I am also using Laravel LiveWire and it is very frustrating that this all worked with MDB4 jQuery and now it doesn't work with MDB5. I relied on the statement that it is already usable in production. But that is absolutely not the case. Many things no longer work or work differently, some in MDB4 is not yet available in MDB5 and what also annoys me is that plugins I used from MDB4 in MDB5 is now only in the much more expensive Advanced package. Of course, some things are better, otherwise I would not have dared the switch. But it is annoying and unnecessarily stops that functions that simply worked in MDB4, now become a real challenge.
Back to the topic: When I create a form in LiveWire, I first have to initialize all MD5 components like DropDowns and Inpus. This was not so in MDB4, but it is doable. LiveWire is also used because of the interactivity. I.e. if I want to evaluate an input before the form is submitted (e.g. to validate the input on the server side or to fill a DropDown field with suitable data) then the DopDowns and Input fields break every time and have to be initialized again. This is not only inconvenient, but also looks stupid.
So if anyone here has some useful tips on how to combine the functionality of LiveWire and the great look of MDB5 without it getting too complicated.
Thanks Greetings
D. Möller commented 4 years ago
also just discovered: the .is-invalid now no longer works for select. What is this? This is just annoying. ...and also not with radio
Grzegorz Bujański staff commented 4 years ago
As I wrote above, we do not officially support Livewire at the moment. Some things may not behave properly due to the solutions used in this framework. But we also plan to check if we are able to solve these problems on our side.
Hello,
with version 3.6.0 labels in selects within a modal are displayed again when this is loaded via LiveWire. A select without modal loaded via LiveWire now does not work at all. The default value is no longer displayed, or the label disappears by choice, or the select is duplicated. It is frustrating. If only I had stayed with MDB4. Now I have to take the original Bootstrap 5 Selects as a temporary solution.
I can't provide a snippet because I don't know how to simulate LiveWire's behavior.
Translated with www.DeepL.com/Translator (free version)
Grzegorz Bujański staff commented 4 years ago
Unfortunately we still do not support LiveWire. We are currently unable to guarantee that all our components will work properly. Sorry about that.
sody pro premium priority commented 3 years ago
hi, did you add livewire support?? i purchased mdb pro advanced yesterday and wasn't ware of these problems with livewire.
Sami
UNNdev pro premium priority commented 3 years ago
No, Livewire support is still not available and Selects are even more complicated to handle than regular inputs. The easiest solution is to just use wire:ignore on the parent container (div, whatever) of the HTML select where MDB will inject the select wrapper, and all other controls.
Hi
Do MDB still has no support for livewire?
SAMI
Grzegorz Bujański staff commented 2 years ago
Unfortunately not. This would require creating a dedicated MDB version for livewire.
sody pro premium priority commented 6 months ago
any news on this ? its been 3 years since I started to use mdb and no progress...
Kamila Pieńkowska staff commented 6 months ago
We do not have version dedicated to livewire.
Unfortunately, we do not currently support Livewire. It looks like Livewire is removing the active class from the label for some reason, which is causing the problem you described.
That's an unsatisfactory answer as it's pretty much a show-stopper for us. We assumed Bootstrap 5 functionality is extended, not reduced with MDBoostrap. :( Having to manually perform all Ajax requests is a major drawback.
As for why the input border is gone - this seems to be caused by the fact that the form-notch div and its children are removed.
The main difference is that floating labels don't use JS. Our component is more complicated, which forces us to use JS. Unfortunately, it seems that due to the way the wire:model works, it doesn't work properly. I suppose input value is empty after blur. This removes the active class in our code.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
UNNdev pro premium priority commented 4 years ago
I wasn't able to post the bug description from the GitHub ticket here because I always get an HTTP 406 error. Apparently, there is something with the text of my ticket your server doesn't like.