Modal: Asynchronous Data Loading Not Working

[stonedleaf]

Describe the bug I upgraded my orchid/platform from 12.1 to 14.4 and I encountered an issue with modals.

I'm currently following the documentation about Async Data Loading here: https://orchid.software/en/docs/modals/#asynchronous-data-loading

And when I try to open the modal using ModalToggle, the following error is shown: TypeError: Failed to construct 'URLSearchParams': The provided value cannot be converted to a sequence. at extended.asyncLoadData (modal_controller.js)

It seems that the modal async code was updated and broke old code.

To Reproduce Steps to reproduce the behavior:

1. Follow documentation code: https://orchid.software/en/docs/modals/#asynchronous-data-loading

Expected behavior Asynchronous data loading works without errors

Temporary Fix

I tried using an array as parameter for asyncParameters(), and it seems to work fine. Something like this: ->asyncParameters(['welcome' => 'Hello World'])

I'm not sure if the code above should be in the documentation.

However, I noticed a significant delay (gray screen) before the modal appears compared to the previous versions of orchid/platform. On the previous version of orchid/platform, the modal appears almost immediately (when on local machine).

Additional context The code on the documentation works in previous versions of orchid/platform (last checked on version 12.1)

[tigerxml]

Hi! The same issue. It does not work as described in the documentation.

[jstarfruits]

@tabuna Hello, I've encountered a similar situation. Upon updating orchid/platform, I found that modals ceased to function, prompting me to revert to the previous version. As I'm unable to update other dependencies, maintaining the current version is the only option until this issue is resolved.

The root cause appears to be attempting to render all screens when calling methods asynchronously, leading to a server error due to the method being called before query() executes and parameters passed being null except for those explicitly provided.

I would appreciate any updates or insights from the developers regarding this issue, including its cause and potential solutions. Resolving this problem would allow for the update to the latest version of orchid/platform and other dependencies. Please feel free to reach out if there's any way I can assist. Thank you for your attention to this matter.

[tabuna]

It does not work as described in the documentation.

I followed the instructions from the documentation, and it worked. However, I might have missed something. Could you please clarify what exactly I overlooked?

    public function commandBar(): iterable
    {
        return [
            ModalToggle::make('Open asynchronous modal')
                ->modal('asyncModal')
                ->modalTitle('Customizable Title')
                ->method('methodForModal')
                ->asyncParameters([
                    'welcome' => 'Hello world!'
                ]),
        ];
    }

    public function asyncGetData(string $welcome): array
    {
        return [
            'welcome' => $welcome,
        ];
    }

    public function layout(): iterable
    {
        return [
            Layout::modal('asyncModal', Layout::rows([
                Input::make('welcome'),
            ]))->async('asyncGetData'),
        ];
    }

[tabuna]

@jstarfruits, could you please share a minimal example? I am unable to reproduce the issue.

[jstarfruits]

@tabuna Thank you for your response.

In my environment, this issue occurs on screens used for creating/editing users. This involves receiving a user ID via routing to determine whether it's an edit or create screen.

The following code works initially, but if I open the modal, close it, and then reopen it, it remains stuck on the loading screen. Upon the second modal request, the name() method of ExampleScreen is executed, and $this->user is null, causing PHP to crash. This leads to the failure of the modal request.

This code was functioning without issues up to version 12.x.

class ExampleScreen extends Screen {
    public $user;
    /**
     * Fetch data to be displayed on the screen.
     *
     * @return array
     */
    public function query(User $user): iterable {
        return [
            'user' => $user,
        ];
    }

    /**
     * The name of the screen displayed in the header.
     *
     * @return string|null
     */
    public function name(): ?string {
        return $this->user->exists ? $this->user->name : 'New User';
    }

    /**
     * The screen's action buttons.
     *
     * @return \Orchid\Screen\Action[]
     */
    public function commandBar(): iterable {
        return [
            ModalToggle::make('Open asynchronous modal')
                ->modal('asyncModal')
                ->modalTitle('Customizable Title')
                ->method('methodForModal')
                ->asyncParameters([
                    'welcome' => 'Hello world!',
                ]),
        ];
    }

    public function asyncGetData(string $welcome): array {
        return [
            'welcome' => $welcome,
        ];
    }

    public function layout(): iterable {
        return [
            Layout::modal('asyncModal', Layout::rows([
                Input::make('welcome'),
            ]))->async('asyncGetData'),
        ];
    }
}

[tabuna]

@jstarfruits Thank you for your example. I was able to reproduce the issue and I'm already working on fixing it.

[tabuna]

I've resolved this issue in version 14.25.0, which is already available. Thank you for your patience and feedback! If you have any other questions or concerns, please feel free to let us know.