[wp-trac] [WordPress Trac] #58416: Media Title field should soft wrap in Media Modal: For better readability/editing of long titles.

[WordPress Trac]

#58416: Media Title field should soft wrap in Media Modal: For better
readability/editing of long titles.
-------------------------+-----------------------------
 Reporter:  abitofmind   |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:  6.2.2
 Severity:  normal       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 **Usability Issue:**
 - In the **Media Modal** the **Title** field currently is an `<input
 type=text>` and as such is single line only.
 - Scrolling a ~50 character long title within a ~20 char text field sucks.
 - Soft wrapping would really benefit longer media titles in terms of
 instant readability and easy editing.

 **Solution Approaches:**

 1. Leaving it a `<input type=text>` and tweak it to soft wrapping with CSS
 only.

 - I found the [https://stackoverflow.com/questions/5286663/wrapping-text-
 inside-input-type-text-element-html-css exact same request on
 StackOverflow] for HTML in general (CMS agnostic)
 - Pure [https://stackoverflow.com/a/31814539/199400 CSS solutions for
 this] which once worked, became unsupported around 2016 in major browsers.
 - Bottom line: `<input type=text>` is single line only and always, user
 agents allow no circumventions.

 2. Alternative approach: Use a `<textarea>` with its built in soft-
 wrapping and resize-ability, integrated with contemporary responsive web
 design techniques, and ensure that the user can not unintentionally insert
 linebreaks.
 - This seems to be the viable solution.
 - Googled & DuckDuck'ed CMS-agnostic, but by coincidence found
 [https://wordpress.org/support/topic/textarea-disable-line-breaks/
 WordPress specific solution] even.
 - JS which intercepts ENTER control characters.
 - To be ultra safe (does it need to be?) this would also need server-side
 validation (in case JS is bypassed somehow (un)intentionally).

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58416>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform