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
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.
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 commented 2 weeks ago
Nevermind, dynamic initialization is documented at the bottom of https://mdbootstrap.com/docs/standard/forms/input-fields/ :)
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB 5
- MDB Version: 3.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
UNNdev pro premium commented 3 weeks 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.