Escaping the navbar search dropdown does nothing on certain pages

Summary

Primary Bug

When hitting Esc while the navbar search field dropdown is open on certain pages (ex: Issues/MR pages), nothing happens. In !70222 (comment 703134121) when the deprecated search component was updated to our GitLab UI one, a discussion resulted in updating Esc to clear the field and update the dropdown back to it's initial options.

Another thought...

Based on how our GitLab UI dropdown component works, hitting Esc should close the dropdown while maintaining focus on the input. Although I can understand clearing the field with the use of Esc (as that is what we do on the Search components), it seems this should also close the dropdown in the case the user's intention is to get rid of the dropdown (as the only current way is to use the mouse or change the focus to another element).

Steps to reproduce

1. Go to an Issue or MR page (for example, this page)
2. Focus the top navbar search field
3. Start typing a search
4. Hit Esc
5. Nothing happens

What is the current bug behavior?

Nothing happens when hitting Esc when the search dropdown is open on certain pages (ex: Issue/MR pages)

What is the expected correct behavior?

Based on discussion in this issue we have landed on the following behavior/direction:

When the navbar search dropdown is open, Esc should not clear the field, but instead dismiss the dropdown and maintain focus on the search input.

• The search field should maintain the expanded size (since this is how we treat it on focus)
• The shortcut icon should remain hidden, and the clear button should persist if there is text in the field
• The scope should remain visible (if the user has entered at least 3 characters)
• If the user starts to type again, the dropdown should re-open
• If the user focuses away from the search input, and then re-focuses the search input, the dropdown should automatically appear with default dropdown options as usual.

Relevant logs and/or screenshots

/cc @zcuddy

Click to expand process progress

Next Steps for this issue

Validation track

• checkboxes are required steps

• Bugs can skip Design and Solution Validation

• workflowvalidation backlog Problem Validation Backlog -@JohnMcGuire

  • Issue is Up-to-date
  • Prioritized in the backlog

• workflowproblem validation Problem validation - @JohnMcGuire

  • Thorough understanding of the problem
    • Problem Validation Template
    • Opportunity Canvas
      • Review of the opportunity canvas
    • UX Research
      • Validate your problem with users
    • Update issue/epic description
    • Ensure your issue is up-to-date with the latest understanding of the problem.
    • Understand and document (in the issue) the goals that people want to accomplish using the Jobs to be Done (JTBD) framework.
    • communicate the findings to Product and UX leadership.
    • PMs are strongly encouraged to open Dogfooding issues

• workflowready for design - @nickbrandt

• workflowdesign Validation phase 3: Design - @nickbrandt

  • Proposed solution(s) identified and documented
    • Diverge: explore multiple different approaches as a team
    • Think Big session.
      • document findings in Dovetail
    • Converge: identify a small set of options to validate
      • Think Small session with the team.
      • Design reviews with team
      • Low fidelity design ideas
      • Update issue/epic description with proposed solution
      • Add Figma design file link or attach design to GitLab's Design Management
      • Validate approach with help from stakeholders.
        • Run user validation using any of the proposed methods
        • Document your findings in Dovetail and appropriate GitLab issue.
      • Draw inspiration from competitive and adjacent offerings.
  • Shared understanding in the team of the proposed solution
    • Review the proposed solution as a team so that everyone has a chance to contribute
      • ask questions
      • raise concerns
      • suggest alternatives
    • Review the proposed solution with leadership.
  • Confidence in the technical feasibility
    • Discuss the technical implications with Engineering to ensure that what is being proposed is possible within the desired timeframe.
    • Engage engineering peers early and often
    • If the solution is large and complex, consider scheduling a spike to mitigate risks and uncover the optimal iteration path.
  • Updated issues/epic descriptions - @JohnMcGuire
    • Ensure issues and epics are up-to-date, so we can continue our work efficiently and asynchronously.
    • Experiment definition
  • Continue Dogfooding process

• workflowsolution validation - Validation phase 4: Solution Validation - @nickbrandt

  • High confidence in the proposed solution
    • Gather feedback from relevant stakeholders.
      • Follow solution validation guidance to gather feedback.
  • Documented Solution validation Learnings
    • Document solution validation findings as insights in Dovetail.
    • Update the opportunity canvas (if used) with relevant insights.
    • Update the issue or epic description to contain or link to the findings.

Build track

• workflowplanning breakdown - @JohnMcGuire
  • Well-scoped MVC issues
    • Issues are the SSOT for all feature development.
    • Refine issues into something that can be delivered within a single milestone
    • Open follow on issues to track work that is de-prioritized
    • Promote existing issues to Epics and open implementation issues for the upcoming milestone
    • Review feature issues with contributors
    • Consider scheduling a POC or engineering investigation issue
    • Make scope tradeoffs to reach for a right-sized MVC
    • Request an issue review to ensure communication is clear and have proposed the right iteration plan to execute on the solution.
• Prioritized in Milestone
  • The team should understand what issues should be delivered during the next milestone
• workflowready for development - @JohnMcGuire
• typebug typefeature typemaintenance - @JohnMcGuire
• Deliverable - @changzhengliu and @nickbrandt
• Add to Planning Issue - @JohnMcGuire
• Defined Quality Plan -@ebanks
  • Quad Planning
  • Test planning
• workflowrefinement - @changzhengliu
  • as needed, refine the aspects of the original feature
• workflowin dev - @changzhengliu
  • Applied by the engineer after work (including documentation) has begun on the issue. An MR is typically linked to the issue at this point.
• workflowin review - Engineering
  • Applied by an engineer indicating that all MRs required to close an issue are in review.
• workflowblocked - Engineering
  • Applied if at any time during development the issue is blocked. For example: technical issue, open question to PM or PD, cross-group dependency.
• workflowverification - Engineering
  • After the MRs in the issue have been merged, this label is applied signaling the issue needs to be verified in staging or production.
• workflowawaiting security release -Engineering
  • Applied by an engineer after the security issue has passed verification, this label signals that it is ready but awaiting the next monthly security release.
• Close the Issue - Once available in production
• Feature is available to GitLab.com hosted customers - Developer
  • Code is deployed to production.
  • Feature flag(s) enabled.
• Feature is available to self-managed customers - Developer
  • Code is included in the self-managed release (depending upon the cut-off).
• Stakeholders of a feature will know it's available in production - Developer
  • After the feature is deployed to production and any needed verification in production is completed, the development team will close the issue.
  • Prior to the issue being closed, the development team may set the workflow label to workflow::verification or workflow::production for tracking purposes.
  • Product Manager may follow up with individual stakeholders to let them know the feature is available.
• Customers will be informed about major changes - @JohnMcGuire
  • Product Manager follows the instructions in the template, which will then cause it to appear on the GitLab.com releases page and be part of the release post.