Help Needed with Real-Time QR Code Display in Filament Form Modal

Hi everyone,
I'm working on a Filament project where I need to generate and display a QR code in real-time within a form modal. The QR code should be dynamically updated when the user inputs an original_url and displayed as an SVG. While the QR code is being generated correctly as the user types, I'm having trouble getting this QR code to be included in the form submission data.
Here's a quick overview of my setup:
The form has fields for title, original_url, and qr_code.
The QR code is generated in real-time when the user types in the original_url field using SimpleSoftwareIO\QrCode.
The QR code is displayed correctly in the modal, but it doesn't seem to persist during form submission.
Here’s the relevant part of my form setup:

                Action::make('create')
                    ->modalHeading('Create New')
                    ->form([
                        \Filament\Forms\Components\Placeholder::make('qr-code')
                            ->label(false)
                            ->content(function (Get $get): ?HtmlString {
                                return is_null($get('original_url')) ?
                                    null :
                                    \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                                    ->style('square')
                                    ->size(250)
                                    ->generate($get('original_url'));
                            }),
...

                Action::make('create')
                    ->modalHeading('Create New')
                    ->form([
                        \Filament\Forms\Components\Placeholder::make('qr-code')
                            ->label(false)
                            ->content(function (Get $get): ?HtmlString {
                                return is_null($get('original_url')) ?
                                    null :
                                    \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                                    ->style('square')
                                    ->size(250)
                                    ->generate($get('original_url'));
                            }),
...

The Issue:
Although the QR code is generated and displayed correctly in the modal, its data isn't being included in the form submission as expected.
Has anyone faced a similar issue or have any suggestions on how to ensure the QR code data is properly handled during form submission? Any help would be greatly appreciated!
Thanks in advance!

                Action::make('create')
                    ->modalHeading('Create New')
                    ->form([
                        \Filament\Forms\Components\Placeholder::make('qr-code')
                            ->label(false)
                            ->content(function (Get $get): ?HtmlString {
                                return is_null($get('original_url')) ?
                                    null :
                                    \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                                    ->style('square')
                                    ->size(250)
                                    ->generate($get('original_url'));
                            }),
...

                Action::make('create')
                    ->modalHeading('Create New')
                    ->form([
                        \Filament\Forms\Components\Placeholder::make('qr-code')
                            ->label(false)
                            ->content(function (Get $get): ?HtmlString {
                                return is_null($get('original_url')) ?
                                    null :
                                    \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                                    ->style('square')
                                    ->size(250)
                                    ->generate($get('original_url'));
                            }),
...

Help Needed with Real-Time QR Code Display in Filament Form Modal

Help Needed with Real-Time QR Code Display in Filament Form Modal

Similar Threads

Similar Threads

Similar Threads