datetime-picker - Converting circular structure to JSON

[claudiodaud]

Describe the bug When using the x-w-datetime-picker component from Wire UI v2, a circular JSON structure error is being thrown. The error occurs specifically when the datetime picker is used with wire:model.live in a Livewire component.

To Reproduce Steps to reproduce the behavior:

1. Create a Livewire component that includes multiple x-w-datetime-picker elements
2. Use wire:model.live on these datetime pickers
3. Interact with any of the datetime pickers
4. Observe the following error in the console:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'component' -> object with constructor 'Object'
    --- property 'positionable' closes the circle
    at JSON.stringify (<anonymous>)
    at livewire.js?id=cc800bf4:2165:36
    at Array.reactiveEffect (livewire.js?id=cc800bf4:2417:18)
    at flushJobs (livewire.js?id=cc800bf4:743:15)

Expected behavior The datetime picker should function normally without throwing any errors related to circular JSON structures.

Screenshots or Videos

Dependencies

• Lang: en_US

Desktop (If applicable, please complete the following information):

• OS: [e.g. Windows 10, macOS Monterey]
• Browser: [e.g. Chrome, Firefox, Safari]
• Version [e.g. 115.0.5790.171]

Smartphone (If applicable, please complete the following information):

• Device: [e.g. iPhone 13, Samsung Galaxy S21]
• OS: [e.g. iOS 16.5, Android 13]
• Browser [e.g. Safari, Chrome]
• Version [e.g. 115.0.5790.171]

Additional context The issue seems to be related to the interaction between Livewire's wire:model.live and the Wire UI datetime picker component. The error suggests that there's a circular reference being created somewhere in the component's structure when it's being serialized by Livewire.

Here's a snippet of the problematic code:

<x-w-datetime-picker 
    without-timezone
    without-time
    placeholder="{{ __('Find by range - start date')}}"
    class="min-w-max w-full"
    wire:model.live="startDate"
/>

Doesn't work on Livewire components, only simple views,

DO NOT UPGRADE FROM VERSION 1.18 TO VERSION 2.0, THE PROJECT WILL HAVE SERIOUS PROBLEMS WITH CHANGING ICON NAMES AND COMPONENT NAMES AND STYLES

This issue occurs with multiple datetime pickers on the same page, all using wire:model.live. Removing wire:model.live or using wire:ignore on the datetime picker components seems to prevent the error, but also breaks the intended functionality.

Any assistance in resolving this circular reference issue while maintaining the reactivity of the datetime picker would be greatly appreciated.

@PH7-Jack