WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#31987 closed defect (bug) (fixed)

Theme Customizer: Widget search field hidden in Safari

Reported by: dsmart Owned by: ocean90
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords: has-patch commit
Focuses: ui Cc:

Description

The customizer's text field to search for widgets does not show in safari.

This video should suffice in explaining.
https://cloudup.com/cRJXA-T2Z6f

Testing environment:
WordPress Trunk 4.2-RC1-32138 running default Twenty Fifteen theme (also tested with 2014 theme) and no active plugins.
Safari Version 8.0.4 (10600.4.10.7)

Attachments (8)

31987.diff (747 bytes) - added by dsmart 4 years ago.
patch file
31987.2.diff (495 bytes) - added by ocean90 4 years ago.
after-31987.2.diff.png (28.4 KB) - added by ocean90 4 years ago.
31987.3.diff (451 bytes) - added by dsmart 4 years ago.
31987.4.diff (1.6 KB) - added by dsmart 4 years ago.
31987.5.diff (1.8 KB) - added by dsmart 4 years ago.
mobile love
31987.6.diff (2.1 KB) - added by dsmart 4 years ago.
mobile love + no focus()
31987.7.diff (2.2 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (21)

@dsmart
4 years ago

patch file

#1 @dsmart
4 years ago

  • Keywords has-patch added

#2 @westonruter
4 years ago

@dsmart Could you determine when this regression was introduced?

#3 @dsmart
4 years ago

@westonruter blames back to [31227] when the search field was set to fixed #30751

Last edited 4 years ago by ocean90 (previous) (diff)

#4 @ocean90
4 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Awaiting Review to 4.2

Hello dsmart, welcome to trac.
There is no need to patch RTL files - they are automatically created in the build process.

overflow: visible doesn't work because the view needs to be scrollable. 31987.2.diff is another approach. Side effect: The scroll bar will overlay the search container.

@ocean90
4 years ago

#5 @dsmart
4 years ago

@Ocean90 I see what you mean now. (ignore the third diff - duplicate)

Last edited 4 years ago by dsmart (previous) (diff)

@dsmart
4 years ago

#6 @dsmart
4 years ago

Here's a solution that involves wrapping the widget list in its own element: 31987.4.diff

This way scrolling is contained so it doesn't overflow over the search input area.

Last edited 4 years ago by dsmart (previous) (diff)

@dsmart
4 years ago

#7 @DrewAPicture
4 years ago

  • Owner set to ocean90
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #core by drew. View the logs.


4 years ago

#9 @helen
4 years ago

31987.4.diff overlays the header on narrow screen / controls-only view, which blocks the close button. The autofocus-keyboard-flyup is also infuriating, we should probably address that while we're in here.

#10 @dsmart
4 years ago

31987.5.diff - No longer hides close button on narrow screens.

31987.6.diff - Does the same, plus it removes the initial .focus() event from the text input, which will succeed in not activating the keyboard on mobile.

@dsmart
4 years ago

mobile love

@dsmart
4 years ago

mobile love + no focus()

@ocean90
4 years ago

#11 @ocean90
4 years ago

  • Keywords has-patch commit added; needs-patch removed

#12 @helen
4 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 32243:

Customizer: Better experience for widget filtering in desktop and iOS Safari.

Previously, the search field did not appear at all in desktop Safari, and the auto-focus keyboard fly-up in iOS rendered widget adding frustrating at best.

props dsmart, ocean90.
fixes #31987.

#13 @helen
4 years ago

A note that this does now make the search field fixed/always visible in controls-only mode (e.g. portrait phone), which is a little bit of a change but something we can address post-4.2 if it really does present as an issue. My personal take is that it is not really an issue, or at least not more than any other number of issues we have in the touch+narrow screen context.

Note: See TracTickets for help on using tickets.