Playlist Editor: refresh track autocomplete (#331)

RocketMan · Sep 2, 2022 · cb6aa7e · cb6aa7e
1 parent 0908546
commit cb6aa7e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/css/zoostyle.css b/css/zoostyle.css
@@ -1140,3 +1140,18 @@ div.toggle-time-entry div {
     background: #ccc;
     border-color: transparent;
 }
+/* make autocomplete mobile ui more consistent with mobile datalist */
+@media (max-width: 1024px) {
+    .ui-autocomplete {
+        max-height: 500px;
+        max-width: 100%;
+    }
+    .ui-autocomplete.ui-widget.ui-widget-content {
+        border-radius: 8px;
+        font-size: 16px;
+    }
+    .ui-autocomplete.ui-widget .ui-menu-item {
+        padding: 8px;
+        border-top: 1px solid gray;
+    }
+}
diff --git a/js/playlists.track.js b/js/playlists.track.js
@@ -47,7 +47,6 @@ $().ready(function(){
     function clearUserInput(clearArtistList) {
         $("#manual-entry input").removeClass('invalid-input').val('');
         $("#comment-entry textarea").val('');
-        $("#track-title").attr('list',''); // webkit hack
         $("#track-titles").empty();
         $("#error-msg").text('');
         $("#tag-status").text('');
@@ -140,18 +139,6 @@ $().ready(function(){
                     "' value='" + htmlify((i+1) + ". " + artist + track.track) + "'>";
             }
             $("#track-titles").html(options);
-            $("#track-title").attr('list','track-titles'); // webkit hack
-            if(navigator.userAgent.match(/firefox/i) &&
-                    $("#track-title").is(":focus")) {
-                // fx hack for Bugzilla 1351483
-                //
-                // if focused, we have to lose and regain focus for
-                // the element to pick up the refreshed datalist
-                //
-                // probably safe everywhere, but scope to firefox
-                // for now, to avoid surprises with other browsers
-                $("#track-title").blur().focus();
-            }
             $("#track-artist").val(diskInfo.attributes.artist);
             $("#track-label").val(diskInfo.relationships != null &&
                                   diskInfo.relationships.label != null ?
@@ -182,12 +169,6 @@ $().ready(function(){
 
             if(refTitle)
                 setAddButtonState(true);
-            else
-                setTimeout(function() {
-                    // change focus asynchronously to avoid double tab
-                    // on tab-initiated focus change
-                    $("#track-title").focus();
-                }, 0);
         }).fail(function (jqXHR, textStatus, errorThrown) {
             var json = JSON.parse(jqXHR.responseText);
             if (json && json.errors) {
@@ -233,7 +214,7 @@ $().ready(function(){
         }
     });
 
-    $("#manual-entry input").on('input', function() {
+    $("#manual-entry input").on('input autocomplete', function() {
         var haveAll = haveAllUserInput();
         setAddButtonState(haveAll);
     });
@@ -695,9 +676,7 @@ $().ready(function(){
             if(tagId > 0) {
                 tagId = 0;
                 $("#track-title").val("");
-                $("#track-title").attr('list',''); // webkit hack
                 $("#track-titles").empty();
-                $("#track-title").attr('list','track-titles'); // webkit hack
                 $("#track-album").val("");
                 $("#track-label").val("");
             }
@@ -723,17 +702,31 @@ $().ready(function(){
         }
     });
 
-    $("#track-title").click(function() {
-        $("#track-titles").show().hide();
-    }).on('change textInput input', function() {
-        var title = $("#track-title").val();
+    $("#track-title").on('click', function() {
+        $(this).autocomplete('search', '');
+    }).on('change textInput input autocomplete', function() {
+        var title = this.value;
         var opt = $("#track-titles option[value='" + escQuote(title) + "']");
         if(opt.length > 0) {
             var artist = opt.data("artist");
             if(artist)
                 $("#track-artist").val(artist);
             $("#track-title").val(opt.data("track"));
         }
+    }).autocomplete({
+        minLength: 0,
+        source: function(rq, rs) {
+            rs($("#track-titles option").map(function() {
+                return this.value;
+            }));
+        },
+        select: function(event, ui) {
+            $(this).val(ui.item.value).trigger('autocomplete');
+            event.preventDefault();
+        },
+        open: function() {
+            $(".ui-menu").scrollTop(0);
+        }
     });
 
     $("#track-album, #track-label").on('change', function() {

diff --git a/ui/Playlists.php b/ui/Playlists.php
@@ -854,7 +854,7 @@ private function emitTrackAdder($playlistId, $playlist, $editTrack = false) {
                     </div>
                     <div>
                         <label>Track:</label>
-                        <input required id='track-title' list='track-titles' maxlength=<?php echo PlaylistEntry::MAX_FIELD_LENGTH;?> autocomplete='off'/>
+                        <input required id='track-title' maxlength=<?php echo PlaylistEntry::MAX_FIELD_LENGTH;?> autocomplete='off'/>
                         <datalist id='track-titles'>
                         </datalist>
                     </div>