Bug 243986

Summary: Allow changing text selection by clicking the padding area on an input field
Product: WebKit Reporter: Jesper van den Ende <jespertheend>
Component: FormsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: cdumez, karlcow, megan_gardner, rniwa, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 12   
Attachments:
Description Flags
screen recording
none
shadow content none

Description Jesper van den Ende 2022-08-16 03:34:53 PDT
Created attachment 461667 [details]
screen recording

To reproduce:
(1) Visit duckduckgo.com and search for some text
(2) Click and drag the padding area on the search field

Expected result:
The search text is selected

Actual result:
The input field receives focus but the cursor is not set at the right position.

Attached is a video of a comparison between Safari (left) and Firefox (right).
Comment 1 Kimmo Kinnunen 2022-08-16 04:37:37 PDT
Pull request: https://github.com/WebKit/WebKit/pull/3359
Comment 2 Kimmo Kinnunen 2022-08-16 04:53:05 PDT
(In reply to Kimmo Kinnunen from comment #1)
> Pull request: https://github.com/WebKit/WebKit/pull/3359
Scratch that, wrong bug number.
Comment 3 Karl Dubost 2022-08-16 16:25:18 PDT
Created attachment 461681 [details]
shadow content

I just tested with Safari Version 16.0 (18614.1.19.1.5)
on macOS 13.0 Beta (22A5295i)
And I can't reproduce.

The text selection is happening. 

Jesper, do you have more details to reproduce?
Or do you have information on plugins, extensions you would have installed. 

Ha I think I figured it out.
This is more about hit testing and the selectable area. 
In the screencast, the cursor is placed above the text but inside the search form.
On Firefox, the selection happens, on Safari it doesn't.

The markup is a box which is 44px high.

<input type="text" 
   name="q" tabindex="1" autocomplete="off" 
   id="search_form_input" class="search__input--adv js-search-input" 
   value="lorem ipsum dolor sit amet" 
   autocapitalize="off" autocorrect="off">

The shadow content is 20px high:

<div contenteditable="plaintext-only">lorem ipsum dolor sit amet</div>


The selection is happening only if the cursor is in the 20px high area.
See the screenshot about shadow content.
Comment 4 Radar WebKit Bug Importer 2022-08-16 16:26:20 PDT
<rdar://problem/98753984>
Comment 5 Karl Dubost 2022-08-16 21:15:13 PDT
A test like this could be used for testing the selection in a specific area
https://searchfox.org/wubkat/source/LayoutTests/editing/selection/user-select-all-selection.html



data:text/html,<!doctype%20html><html><input%20style="height:100px;font-size:20px;border:1px%20solid%20red;"%20type="text">