Skip to content

Commit

Permalink
feature #5649 Add preload options to autoload TomSelect (Lustmored)
Browse files Browse the repository at this point in the history
This PR was merged into the 4.x branch.

Discussion
----------

Add preload options to autoload TomSelect

My users have raised a concern that using autocomplete fields is not intuitive as with default EA settings they have to open the field and write something to actually see any results and found that confusing (especially when there are just a few results to choose from). I have found that TomSelect has an option to preload results on focus (`preload: 'focus'`). When combined with `maxOptions: null` it enchances UX by loading first page of results on focus. Like this:

![ezgif-3-bfe613d4ea](https://user-images.githubusercontent.com/2358046/220604033-4367d1cb-f7c7-4ef5-8e48-e60036547ea1.gif)

EasyAdmin is supporting paging results out of the box and with this change users with not many options available will see them quickly without the need to type anything, while users with thousands of options will see the first page and can easily search from there.

In my (and my users) opinion this change enhances UX, so I believe it might be useful as the default for `autocomplete` fields. I can also hide this easily behind some flag, if you'd prefer to keep current settings as the default of course 😸

Commits
-------

52c6a07 Add preload options to autoload TomSelect
  • Loading branch information
javiereguiluz committed Apr 26, 2023
2 parents b6ecafb + 52c6a07 commit 7784cdb
Show file tree
Hide file tree
Showing 7 changed files with 290 additions and 291 deletions.
2 changes: 2 additions & 0 deletions assets/js/autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,8 @@ export default class Autocomplete
.then(json => { this.setNextUrl(query, json.next_page); callback(json.results) })
.catch(() => callback());
},
preload: 'focus',
maxOptions: null,
// on remote calls, we don't want tomselect to further filter the results by "entityAsString"
// this override causes all results to be returned with the sorting from the server
score: function(search) {
Expand Down
4 changes: 2 additions & 2 deletions src/Resources/public/app.1d0fe5a5.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/Resources/public/app.1d0fe5a5.rtl.css

Large diffs are not rendered by default.

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Resources/public/entrypoints.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"/app.1d0fe5a5.rtl.css"
],
"js": [
"/app.a77043ce.js"
"/app.b5acb2f0.js"
]
},
"form": {
Expand Down
565 changes: 281 additions & 284 deletions src/Resources/public/manifest.json

Large diffs are not rendered by default.

0 comments on commit 7784cdb

Please sign in to comment.