Touch events via livewire do not emit for me on IOS via iPad

#1

What seems to be the problem:
On IOS via iPad (safari and chrome) touch events via livewire do not emit. Was wondering if anyone has dealt with such issues? Any issue in the domain of touch and livewire events/actions would be helpful.

Steps to Reproduce:
If i’m using Livewire actions wire:click or wiring the model up via wire:model the ipad doesn’t seem to be able to call any of the actions or update livewire component properties.

Are you using the latest version of Livewire:
Using version livewire/livewire": "^1.0.0

Do you have any screenshots or code examples:

Here’s an example of the inputs that I wired up:

<input id="consentObtained[1]" type="radio" value="1" wire:model="consentObtained"> 
    <label for="consentObtained[1]" class="mr-4">
        Yes
    </label>
    
    <input id="consentObtained[0]" type="radio" value="0" wire:model="consentObtained")> 
    <label for="consentObtained[0]" class="ml-4">
        No
    </label>

For debugging purposes I’ve also tried


 <button wire:click="$set('foobar', 'jones')">set the foo</button>

    <button wire:click="foobarAction">safasd</button>

Because I thought perhaps the bug had something to do with the way I was using Labels and Inputs… but these standard buttons didn’t work either. However, when I did a simple javascript event handler like `onclick=“alert(‘hi’)” the touch event was registered and I saw the alert box.

#2

Does this app work on a browser on your PC? Can you post your component code so we can see what your foobarAction is trying to do? Also, I’m not quite sure what you’re trying to accomplish with $set('foobar', 'jones') and your component code could help clarify things.

I’ve used livewire on iOS (tested on iPhone and iPad) and touch events trigger fine.

#3

Thanks for replying.

$set('foobar', 'jones') was simply my way of seeing if a livewire event would fire. Since everything works fine on my laptop-browser, I needed a way to debug on my ipad.

So I had a public property $foobar and if I could tap the Livewire linked button and see that $foobar value indeed changed within the UI, then at least I know that basic Livewire actions are being emitted.

My component code abridged :



class AssessmentResponseScreeningForm extends Component
{
    public $assessmentResponse;

    public $consentObtained;

    public $versionDate;
    public $consentDate;
    public $consentTime;

    public $inclusionAge;
    public $inclusionDevice;
    public $inclusionCapability;

    public $exclusionPregnancy;
    public $exclusionOsteoporosis;
    public $exclusionCirrhosis;

    public $screeningCompleted;
    public $screeningPassed;

    public $foobar = 'if tap event works this value should change';    

    public $rules = [
        'versionDate' => 'required',
        'consentDate' => 'required | date',
        'consentTime' => 'required'
    ];

    public function mount(AssessmentResponse $assessmentResponse)
    {
        $this->assessmentResponse = $assessmentResponse;
    }

    public function foobarAction()
    {
        $this->foobar = now()->format('h:m:s');
    }

    public function beginAssessment()
    {
        $this->validate($this->rules);

        $informedConsent = $this->assessmentResponse->informedConsent()->create([
            'version' => $this->versionDate,
            'date' => $this->consentDate,
            'time' => $this->consentTime,
            'screeningPassed' => 1
        ]);

        redirect()->to(route('complete.assessmentResponse', $this->assessmentResponse));
    }

    public function markAsFailed()
    {
        $this->validate($this->rules);

        $informedConsent = $this->assessmentResponse->informedConsent()->create([
            'version' => $this->versionDate,
            'date' => $this->consentDate,
            'time' => $this->consentTime,
            'screeningPassed' => 0
        ]);

        redirect()->to(route('assessment.show', $this->assessmentResponse->assessment));
    }

    public function render()
    {
        return view('livewire.assessment-response-screening-form');
    }
}

Do you have an example for a component that works succesfully with touch events on Ipad/Ios?

#4

There’s nothing special I did to make livewire work with iOS, just used wire:click. From your code, <button wire:click="foobarAction"></button> should change foobar but I don’t see foobar being rendered anywhere in your view. I understand you’ve probably provided just a snippet in your original post.

I would recommend setting up a simpler example to see if it’s livewire or something else that’s causing the issue. What I like to do when troubleshooting is having a route in my routes/web.php file that go directly to a component then only work with that single component.

routes/web.php

Route::livewire('/test', 'test-component');

test-component.blade.php

<div>
<button wire:click="foobarAction">test</button>
{{ $foobar }}
</div>

TestComponent.php

<?php

namespace App\Http\Livewire;

class TestComponent extends Component
{
    public $foobar = 'not changed';

    public function foobarAction()
    {
        $this->foobar = 'changed.';
    }
}

Try in your browser and then try on iPad the /test route should go directly to your component. There shouldn’t be anything sufficiently different between the iOS device and your web browser on your laptop to cause the issue you’re experiencing. I’m unsure what else is on the page that might be causing the problem so it’s best to isolate and deal with whether you can execute the click event in iOS with something really simple.

#5

Hey thanks a lot for taking the time to reply.

I understand you’ve probably provided just a snippet in your original post.

You’re 100 percent right here.

I went ahead and setup that test component, but it fails on the ios Tablet. This is a real old tablet so that might be the reason. I’ll hit you back up if I ever find a solution to this in the long run.