cuelang.org: frontend: search doesn't work on mobile #2848

jpluscplusm · 2024-02-21T19:29:54Z

What page were you looking at?

What version of the site were you looking at?

cue-lang/cuelang.org@916ac4f

What did you do?

I tried to use the search interface to find documents related to "testing". I was using mobile Safari on an iPhone 14 running iOS version 17.2.1. A video of the process is shared here: https://share.icloud.com/photos/046O91wx0ppHT2lLhvBOkU0Fw. (NB iCloud automatically unshares the video on March 22, 2024)

What did you expect?

I expected to see a results page containing (far) fewer than the site's current corpus of 217 pages.

What did you see instead?

Problem 1

As shown in the video above, I:

opened the floating search box via the hamburger menu
clicked in the search UI
typed the word "testing"
hit the on-screen keyboard's "search" action button.

A results page was returned with a list of all the documents on the site, and definitely not the set of documents matching my search string. Not shown in the video, the page URL had no search term in the q= query string parameter.

Problem 2

Shown in the same video, on the results page I:

clicked in the on-page search UI's text box in the body of the page (not using the hamburger menu, this time)
observed that the yellow-tinted search UI was displayed
clicked in the yellow-tinted UI's text box
observed that the yellow-tinted search UI disappeared, leaving me with the previous results list.

An on-screen keyboard was never presented, leaving me unable to enter a new search term.

The text was updated successfully, but these errors were encountered:

jpluscplusm · 2024-02-21T21:41:33Z

Problem 2 also strikes on pages such as https://alpha.cuelang.org/docs/howto/find-a-guide/ that use the search shortcode.

----------------------------------------------------------------------- DO NOT SUBMIT cue-lang/cue#2848 tracks that mobile search is (and always has been) broken. Let's not submit this until it's either fixed, or we've taken an explicit decision to merge despite the brokenness. ----------------------------------------------------------------------- This change replaces the Hugo-generated index of docs on docs/{tutorial,concept,howto}/ with a search widget scoped to the relevant content type. It also removes the dedicated find-a-X page (leaving a Hugo alias behind), rewords content above the search widget to align with the new UX, and updates page weights to ensure the left-hand nav is ordered correctly and consistently across sections. This change has to move the explanation of Commented CUE guides off docs/howto/ and onto its own page, as the explanation couldn't reasonably co-exist with the search widget. This requires updates to the ~60 pages that link back to the explanation, which generates a lot of noise in this change. The pages requiring review are the top-level pages mentioned in the trailer, and the preview's rendered left-hand nav when each of those top-level pages is open. We intended to add a local-development-only index for ease of content creation, but the Hugo solution for that page proved harder to figure out than anticipated and was deemed out of scope for this change. Tracked in cue-lang/cue#2946. We would have limited the length/number of search results displayed on each section's top-level page if such an option were available. cue-lang/cue#3001 tracks its absence. Closes cue-lang/docs-and-content#81 Closes cue-lang/docs-and-content#82 Closes cue-lang/docs-and-content#83 Preview-Path: /docs/tutorial/ Preview-Path: /docs/howto/ Preview-Path: /docs/howto/about-commented-cue-guides/ Preview-Path: /docs/concept/ Signed-off-by: Jonathan Matthews <[email protected]> Change-Id: I0b5d6e1caeaf79d27d314550a01b3a886d686692

----------------------------------------------------------------------- DO NOT SUBMIT cue-lang/cue#2848 tracks that mobile search is (and always has been) broken. Let's not submit this until it's either fixed, or we've taken an explicit decision to merge despite the brokenness. ----------------------------------------------------------------------- This change replaces the Hugo-generated index of docs on docs/{tutorial,concept,howto}/ with a search widget scoped to the relevant content type. It also removes the dedicated find-a-X page (leaving a Hugo alias behind), rewords content above the search widget to align with the new UX, and updates page weights to ensure the left-hand nav is ordered correctly and consistently across sections. This change has to move the explanation of Commented CUE guides off docs/howto/ and onto its own page, as the explanation couldn't reasonably co-exist with the search widget. This requires updates to the ~60 pages that link back to the explanation, which generates a lot of noise in this change. The pages requiring review are the top-level pages mentioned in the trailer, and the preview's rendered left-hand nav when each of those top-level pages is open. We intended to add a local-development-only index for ease of content creation, but the Hugo solution for that page proved harder to figure out than anticipated and was deemed out of scope for this change. Tracked in cue-lang/cue#2946. We would have limited the length/number of search results displayed on each section's top-level page if such an option were available. cue-lang/cue#3001 tracks its absence. Closes cue-lang/docs-and-content#81 Closes cue-lang/docs-and-content#82 Closes cue-lang/docs-and-content#83 Preview-Path: /docs/tutorial/ Preview-Path: /docs/howto/ Preview-Path: /docs/howto/about-commented-cue-guides/ Preview-Path: /docs/concept/ Signed-off-by: Jonathan Matthews <[email protected]> Change-Id: I0b5d6e1caeaf79d27d314550a01b3a886d686692 Dispatch-Trailer: {"type":"trybot","CL":1188430,"patchset":4,"ref":"refs/changes/30/1188430/4","targetBranch":"master"}

----------------------------------------------------------------------- cue-lang/cue#2848 tracks that mobile search is (and always has been) broken. Let's not submit this until it's either fixed, or we've taken an explicit decision to merge despite the brokenness. ----------------------------------------------------------------------- This change replaces the Hugo-generated index of docs on docs/{tutorial,concept,howto}/ with a search widget scoped to the relevant content type. It also removes the dedicated find-a-X page (leaving a Hugo alias behind), rewords content above the search widget to align with the new UX, and updates page weights to ensure the left-hand nav is ordered correctly and consistently across sections. This change has to move the explanation of Commented CUE guides off docs/howto/ and onto its own page, as the explanation couldn't reasonably co-exist with the search widget. This requires updates to the ~60 pages that link back to the explanation, which generates a lot of noise in this change. The pages requiring review are the top-level pages mentioned in the trailer, and the preview's rendered left-hand nav when each of those top-level pages is open. We intended to add a local-development-only index for ease of content creation, but the Hugo solution for that page proved harder to figure out than anticipated and was deemed out of scope for this change. Tracked in cue-lang/cue#2946. We would have limited the length/number of search results displayed on each section's top-level page if such an option were available. cue-lang/cue#3001 tracks its absence. Closes cue-lang/docs-and-content#81 Closes cue-lang/docs-and-content#82 Closes cue-lang/docs-and-content#83 Preview-Path: /docs/tutorial/ Preview-Path: /docs/howto/ Preview-Path: /docs/howto/about-commented-cue-guides/ Preview-Path: /docs/concept/ Signed-off-by: Jonathan Matthews <[email protected]> Change-Id: I0b5d6e1caeaf79d27d314550a01b3a886d686692

----------------------------------------------------------------------- cue-lang/cue#2848 tracks that mobile search is (and always has been) broken. Let's not submit this until it's either fixed, or we've taken an explicit decision to merge despite the brokenness. ----------------------------------------------------------------------- This change replaces the Hugo-generated index of docs on docs/{tutorial,concept,howto}/ with a search widget scoped to the relevant content type. It also removes the dedicated find-a-X page (leaving a Hugo alias behind), rewords content above the search widget to align with the new UX, and updates page weights to ensure the left-hand nav is ordered correctly and consistently across sections. This change has to move the explanation of Commented CUE guides off docs/howto/ and onto its own page, as the explanation couldn't reasonably co-exist with the search widget. This requires updates to the ~60 pages that link back to the explanation, which generates a lot of noise in this change. The pages requiring review are the top-level pages mentioned in the trailer, and the preview's rendered left-hand nav when each of those top-level pages is open. We intended to add a local-development-only index for ease of content creation, but the Hugo solution for that page proved harder to figure out than anticipated and was deemed out of scope for this change. Tracked in cue-lang/cue#2946. We would have limited the length/number of search results displayed on each section's top-level page if such an option were available. cue-lang/cue#3001 tracks its absence. Closes cue-lang/docs-and-content#81 Closes cue-lang/docs-and-content#82 Closes cue-lang/docs-and-content#83 Preview-Path: /docs/tutorial/ Preview-Path: /docs/howto/ Preview-Path: /docs/howto/about-commented-cue-guides/ Preview-Path: /docs/concept/ Signed-off-by: Jonathan Matthews <[email protected]> Change-Id: I0b5d6e1caeaf79d27d314550a01b3a886d686692 Dispatch-Trailer: {"type":"trybot","CL":1188430,"patchset":5,"ref":"refs/changes/30/1188430/5","targetBranch":"master"}

myitcv · 2024-05-01T13:29:25Z

@jpluscplusm please can you do a quick check to ensure this issue is still current?

jpluscplusm · 2024-05-01T14:44:51Z

@jpluscplusm please can you do a quick check to ensure this issue is still current?

Yes: on the same iPhone as the issue mentions, now running iOS 17.4.1, both the problems still strike as described.

myitcv · 2024-05-02T15:32:43Z

Note this also affects the desktop version when working in a smaller viewport (perhaps unsurprising, but noting here for completeness)

jpluscplusm · 2024-05-02T16:10:53Z

Note this also affects the desktop version when working in a smaller viewport (perhaps unsurprising, but noting here for completeness)

Problem #1 strikes on desktop with a narrow viewport. I can't get problem #2 to strike in the same context, as it's on-screen-keyboard related.

anne-usmedia · 2024-06-03T09:14:54Z

I created an issue for algolia since we couldn't find a fix for this: algolia/autocomplete#1259

jpluscplusm · 2024-06-17T13:29:30Z

Problem 2 appears to have been resolved by NPM upgrades or site/UI changes. Problem 1 still strikes.

@anne-usmedia Does the idea linked to by the comment on your upstream issue look like it'll resolve problem 1?

JorindeUsMedia · 2024-06-18T16:28:47Z

@jpluscplusm The comment on the algolia issue wasn't very helpful for us.. But I've possibly found the problem in our code. I managed to get more insights by using android remote debug in chrome and I think I found the issue. Will do some more tests and hopefully provide a pr with the solution this week.

…out using the query - Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - On click of the document only close and reset the algolia-autocomplete when not in detached mode (screenwidth > 1023). In detached mode the target is always outside the element which causes the autocomplete to close and reset the query. The user was still navigated away by the on-submit handler of algolia but because the document click triggered emptying the query the user ended up on the search page without a query param. Fixes cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - On click of the document only close and reset the algolia-autocomplete when not in detached mode (screenwidth > 1023). In detached mode the click-target is outside the element which triggered the event which causes the autocomplete to close and reset the query. The user was still navigated away by the on-submit handler of algolia but because the document click triggered emptying the query the user ended up on the search page without a query param. Fixes cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - On click of the document only close and reset the algolia-autocomplete when not in detached mode (screenwidth > 1023). In detached mode the click-target is outside the element which triggered the event which causes the autocomplete to close and reset the query. The user was still navigated away by the on-submit handler of algolia but because the document click triggered emptying the query the user ended up on the search page without a query param. - Fix z-index issue which causes the filter button to show on top of the autocomplete box on mobile Fixes cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - On click of the document only reset the algolia-autocomplete when not in detached mode (screenwidth > 1023). In detached mode the click-target is outside the element which triggered the event which caused resetting the query. The user was still navigated away by the on-submit handler of algolia but because they query was emptied the user ended up on the search page without a query param in the url. Fixes cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - On click of the document only reset the algolia-autocomplete when not in detached mode (screenwidth > 1023). In detached mode the click-target is outside the element which triggered the event which caused resetting the query. The user was still navigated away by the on-submit handler of algolia but because they query was emptied the user ended up on the search page without a query param in the url. Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - On click of the document only reset the algolia-autocomplete when not in detached mode (screenwidth > 1023). In detached mode the click-target is outside the element which triggered the event which caused resetting the query. The user was still navigated away by the on-submit handler of algolia but because they query was emptied the user ended up on the search page without a query param in the url. - Fix issue with right side of search-icon in bar not showing on mobile Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile - Fix type issue with autocomplete: type was unknown so I've added the right type Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile - Fix type issue with autocomplete: type was unknown so I've added the right types Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile - Fix type issue with autocomplete: type was unknown so I've added the right types Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Also test the desktop version and search results input field Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile - Fix type issue with autocomplete: type was unknown so I've added the right types Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Also test the desktop version and search results input field Closes #461 as merged as of commit f7aa22ea6. Signed-off-by: Jorinde Reijnierse <[email protected]> Change-Id: Ie5a29e734304772741d685de135dfd61806f70f0 Dispatch-Trailer: {"type":"trybot","CL":1196529,"patchset":1,"ref":"refs/changes/29/1196529/1","targetBranch":"master"}

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile - Fix type issue with autocomplete: type was unknown so I've added the right types Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Also test the desktop version and search results input field Signed-off-by: Jorinde Reijnierse <[email protected]>

- Move the max width of the detached mode query to a variable so it can be reused - Move the on doc click logic to its own function - Save if autocomplete is open in a variable so we can access it on doc click - On click of the document only close & reset the algolia-autocomplete when is not open AND click is outside element AND outside overlay (in detached mode overlay is outside the element) - Fix issue with right side of search-icon in bar not showing on mobile - Fix type issue with autocomplete: type was unknown so I've added the right types Fixes: cue-lang/cue#2848 To test: On mobile click on the menu (hamburger) and click in the search box. Type in a search query and either hit the enter key or click the search icon next to the input field. Also test the desktop version and search results input field Closes #461 as merged as of commit 3ec1da690. Signed-off-by: Jorinde Reijnierse <[email protected]> Change-Id: Ie5a29e734304772741d685de135dfd61806f70f0 Dispatch-Trailer: {"type":"trybot","CL":1196529,"patchset":2,"ref":"refs/changes/29/1196529/2","targetBranch":"master"}

jpluscplusm added NeedsInvestigation Triage Requires triage/attention cuelang.org labels Feb 21, 2024

jpluscplusm changed the title ~~alpha.cuelang.org: mobile search doesn't work~~ cuelang.org: mobile search doesn't work Mar 26, 2024

jpluscplusm changed the title ~~cuelang.org: mobile search doesn't work~~ cuelang.org: frontend: search doesn't work on mobile Apr 8, 2024

This was referenced Apr 26, 2024

docs/howto: replace index with search cue-lang/docs-and-content#82

Closed

docs/tutorial: replace index with search cue-lang/docs-and-content#81

Closed

docs/concept: replace index with search cue-lang/docs-and-content#83

Closed

myitcv added zcuelang.org categorise frontend cuelang.org frontend UI/UX related and removed Triage Requires triage/attention zcuelang.org categorise labels May 1, 2024

myitcv mentioned this issue May 17, 2024

cuelang.org: upgrade NPM-based dependencies #3152

Closed

JorindeUsMedia self-assigned this Jun 18, 2024

JorindeUsMedia mentioned this issue Jun 18, 2024

hugo: Fix search not working on mobile cue-lang/cuelang.org#461

Closed

cueckoo closed this as completed in cue-lang/cuelang.org@16d31f5 Jun 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cuelang.org: frontend: search doesn't work on mobile #2848

cuelang.org: frontend: search doesn't work on mobile #2848

jpluscplusm commented Feb 21, 2024 •

edited by myitcv

Loading

jpluscplusm commented Feb 21, 2024 •

edited

Loading

myitcv commented May 1, 2024

jpluscplusm commented May 1, 2024

myitcv commented May 2, 2024

jpluscplusm commented May 2, 2024

anne-usmedia commented Jun 3, 2024

jpluscplusm commented Jun 17, 2024

JorindeUsMedia commented Jun 18, 2024 •

edited

Loading

cuelang.org: frontend: search doesn't work on mobile #2848

cuelang.org: frontend: search doesn't work on mobile #2848

Comments

jpluscplusm commented Feb 21, 2024 • edited by myitcv Loading

What page were you looking at?

What version of the site were you looking at?

What did you do?

What did you expect?

What did you see instead?

Problem 1

Problem 2

jpluscplusm commented Feb 21, 2024 • edited Loading

myitcv commented May 1, 2024

jpluscplusm commented May 1, 2024

myitcv commented May 2, 2024

jpluscplusm commented May 2, 2024

anne-usmedia commented Jun 3, 2024

jpluscplusm commented Jun 17, 2024

JorindeUsMedia commented Jun 18, 2024 • edited Loading

jpluscplusm commented Feb 21, 2024 •

edited by myitcv

Loading

jpluscplusm commented Feb 21, 2024 •

edited

Loading

JorindeUsMedia commented Jun 18, 2024 •

edited

Loading