BelongsTo::make()->searchable() Not Suggesting Values on Android

[monter08]

Laravel Version: 10.x
Nova Version: 4.35.5
PHP Version: 8.2.x
Database Driver & Version: MySQL 8.0.x
Operating System and Version: Android 12
Browser type and version: Chrome 131.0.6778.81

Description:

The BelongsTo field with the ->searchable() method does not suggest any values when accessed on Android devices using Chrome. This issue was tested on multiple Android devices and persists across all of them.

Detailed steps to reproduce the issue on a fresh Nova installation

1. Set up a fresh Laravel Nova application with version 4.35.5.
2. Create a BelongsTo field in a resource, e.g.,

   BelongsTo::make(__('Select'), 'select', Data::class)->searchable(); 

3. Deploy the application and access the Nova resource page using an Android device with Chrome.
4. Click on the searchable dropdown and attempt to type and search for values

Actual Result:
No suggestions are displayed.

On Desktop this work well.

[crynobone]

Unable to reproduce the issue, please provide full reproducing repository based on fresh installation as suggested in the bug report template (or you can refer to https://github.com/nova-issues for example)

Screen_Recording_20241201_163009_Chrome.mp4

[OliOnline]

I have a similar issue and can add more details (on web browser also).

When creating a new resource with a belongTo relationship, having the searchable option, the field initially display zéro option, we absolutely need to search for something in order to see any options.

Even if "relatableQueryUsing" is fired, and I could get all the options I'd like to display, I still need to enter some characters to be able to have options showing up.

Also, when editing the resource, it works, I can show "initial options", probably because there is already something in the search field ?

[crynobone]

Unable to reproduce the issue, please provide full reproducing repository based on fresh installation as suggested in the bug report template (or you can refer to https://github.com/nova-issues for example)

[monter08]

Repository: https://github.com/monter08/nova-issue-6595

example.mov

[monter08]

it looks like an event onkeypress on mobile not work (only event blur starts the search), while searching i came across the topic: https://stackoverflow.com/questions/50617865/vue-v-model-input-change-mobile-chrome-not-work

[monter08]

Taking into this comment and other similar threads discussing the issue, the easiest way to reproduce the problem is to visit this link on an Android device (and probably with the Gboard keyboard).

To solve the problem, I suggest changing the way data is passed in laravel/nova/resources/js/components/Inputs/SearchInput.vue from:

<input v-model="searchValue" .../>

to:

<input @input="e => searchValue = e.target.value" />

This solution works for me.

[crynobone]

I'm not keen on making a PR to change the default as certain language and keyboard settings would require multiple inputs before accepting it as a character input.

Will need to revisit into previous issues related to keyboard input before fixing this.

• Searchable BelongsTo fields doesn't work well with multibyte language. #4012