Web-stories-wp: Typing while having single text field selected does not work

[barklund]

Bug Description

When you have a single text field selected, you can enter edit mode in a number of ways:

• By clicking enter (enters edit mode with entire content selected)
• By clicking with the mouse (enters edit mode with cursor placed at click)
• By typing any (printable) character (enters edit mode, clears the text field and replaces it with the character pressed).

However this latter method is broken since #1323. Now typing a single character does enter edit mode and does delete the contents, but does not insert the pressed character.

Expected Behaviour

• When typing a single character while having a text field selected but not in edit mode, the element should enter edit mode with the entire contents of the text field replaced by the character pressed and the cursor located after the character.

Steps to Reproduce

1. Add a text field and make sure it's selected, but not in edit mode
2. Press W on the keyboard
3. Observe that edit mode is entered, content is cleared, but W is not inserted into text field.

Screenshots

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

QA Instructions

1. Add a text field
2. Unselect the text field by clicking the background
3. Select the text field using the mouse by clicking on it a single time
4. Type any alphanumeric character and observe text field going into edit mode with only the typed character (NB: this only supports a-z and 0-9)

[samitron7]

Figma flow

[barklund]

This will be fixed by #1755.

@obetomuniz, please check this issue to make sure the mentioned Figma flow is followed.

[miina]

This will be fixed by #1755.

Did you mean #830? :)

@obetomuniz Will assign this to you and move to Review for clarity since #1810 seems to address this.

[csossi]

Not working on when first inserting text

• selected the "+" beside the "T"
• element appears on canvas showing a "selected" state by default (didn't move it or anything)
  
• when I type, nothing appears in the field
  NOTE: if I de-select the element and then REselect it, then I can immediately start typing (as expected). Also, if I move the element anywhere on the canvas before typing, then it'll work as expected
  Note: Same behaviour exists for "T" selections (Heading, etc.)

[csossi]

Cleared cache and retested (PR #1810)

No change. To replicate:

• Select the "+" beside the "T"
• field appears already selected. Do not move or click on it
  
• start typing (no characters appear)

Note: if you MOVE or unselect/reselect then it WILL work

[obetomuniz]

1810 is only about make the input editable as described here (same is happening on #830), so as you said:

• It's working as expected by clicking to select unselected text element and pressing Enter.
• It's working as expected by clicking to select unselected text element and pressing any alphanumeric key.
• It's working as expected by clicking twice to enter on edit mode of a unselected text element.

@csossi The issue that you are reporting is #1808, which will be addressed by another PR.

@barklund should we block this issue/PR until have the work on #1808 done or move it forward?

[barklund]

@csossi, this ticket is only about when you have actively selected a text field. Ignore cases where the text field _appears_ selected but doesn't have keyboard focus - that's a much more complex situation we're dealing with elsewhere - in #1808 and #1852 among other things. This ticket is not about that.

For this ticket, please see the updated QA instructions - make sure text field has keyboard focus before testing.

[csossi]

Understood, @barklund

Verified in QA

[samitron7]

Verified in UAT