Inertia Default Banner Component Does Not Show More Than Once

[bricehartmann]

• Jetstream Version: 2.2.2
• Jetstream Stack: Inertia
• Uses Teams: no
• Laravel Version: 8.29.0
• PHP Version: 7.4.2
• Database Driver & Version: mysql, 8.0.22

Description:

The default Banner component included with Jetstream will only show once if the same component is rendered after a form submission.

Steps To Reproduce:

1. Spin up a new Laravel project with Jetstream (Inertia)
2. Create a new component MyForm on the front end that submits to POST /my-form and drop it into your application
3. Create a new route on the back end that flashes a banner to the session

Route::post('/my-form', function (\Illuminate\Http\Request $request) {
    $request->session()->flash('flash.banner', 'This is a banner');
    $request->session()->flash('flash.bannerStyle', 'success');

    return Inertia::render('MyFrom');
})->name('submit-my-form');

4. Submit the form
5. Dismiss the banner
6. Submit the form again
7. See that no new banner appears

Workaround:

Currently I am working around this by assigning a unique ID to each banner that is flashed with a watcher to reset the show flag in the Banner component.

In the Banner component, a new computed property:

id() {
  return this.$page.props.jetstream.flash?.bannerId || null
}

In the Banner component, a new watcher:

watch: {
  id(current, old) {
    if (current !== old) {
      this.show = true;
    }
  }
}

On the back end, any time I flash a banner to the session:

$request->session()->flash('flash.bannerId', uniqid());

[driesvints]

Can you maybe create a repo that reproduces the bug so I can debug this more easily? Please commit your custom changes separately from the base skeleton.

[driesvints]

Closing this issue because it's inactive, already solved, old or not relevant anymore. Feel free to reply if you're still experiencing this issue and we'll re-open this issue.

[mgsmus]

Thanks for the solution @bricehartmann I'm also dealing with that problem. To make things easier and prevent to re-render the component, I've added a timestamp value to HandleInertiaRequests::share() to make it available every component. I'm watching this value if I need:

const requestDate = computed(() => {
    return usePage().props.value.requestDate
})

watch(requestDate, (current, prev) => {
    if (current !== prev) {
        show.value = true
    }
})

[melih]

The problem is still there and needs to be solved. Thank you @bricehartmann.

[cwray-tech]

@driesvints this is still an issue. Where is the backend logic to the banner flash so I can make a pull request?