LibWeb: Update the <textarea> shadow DOM when the value attribute is set

Otherwise, setting the value attribute after the element is added to the
DOM is not visibile. The logic here was stolen from the <input> element.
This commit is contained in:
Timothy Flynn 2024-03-14 07:37:25 -04:00 committed by Andreas Kling
commit abc1be5b9e
Notes: sideshowbarker 2024-07-17 20:33:50 +09:00
3 changed files with 33 additions and 6 deletions

View file

@ -5,6 +5,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 1 from TextNode start: 0, length: 1, rect: [254,8 10x22] baseline: 17 frag 1 from TextNode start: 0, length: 1, rect: [254,8 10x22] baseline: 17
" " " "
frag 2 from BlockContainer start: 0, length: 0, rect: [267,11 240x44] baseline: 17 frag 2 from BlockContainer start: 0, length: 0, rect: [267,11 240x44] baseline: 17
frag 3 from BlockContainer start: 0, length: 0, rect: [513,11 240x44] baseline: 17
TextNode <#text> TextNode <#text>
BlockContainer <textarea> at (11,11) content-size 240x44 inline-block [BFC] children: not-inline BlockContainer <textarea> at (11,11) content-size 240x44 inline-block [BFC] children: not-inline
BlockContainer <div> at (11,11) content-size 240x22 children: not-inline BlockContainer <div> at (11,11) content-size 240x22 children: not-inline
@ -19,6 +20,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from TextNode start: 0, length: 19, rect: [267,11 177.6875x22] baseline: 17 frag 0 from TextNode start: 0, length: 19, rect: [267,11 177.6875x22] baseline: 17
"Well hello friends!" "Well hello friends!"
TextNode <#text> TextNode <#text>
BlockContainer <textarea> at (513,11) content-size 240x44 inline-block [BFC] children: not-inline
BlockContainer <div> at (513,11) content-size 240x22 children: not-inline
BlockContainer <div> at (513,11) content-size 240x22 children: inline
frag 0 from TextNode start: 0, length: 16, rect: [513,11 154.0625x22] baseline: 17
"Tja hej vänner!"
TextNode <#text>
TextNode <#text> TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
@ -33,3 +40,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>) [267,11 240x22] PaintableWithLines (BlockContainer<DIV>) [267,11 240x22]
PaintableWithLines (BlockContainer<DIV>) [267,11 240x22] PaintableWithLines (BlockContainer<DIV>) [267,11 240x22]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TEXTAREA>) [510,8 246x50]
PaintableWithLines (BlockContainer<DIV>) [513,11 240x22]
PaintableWithLines (BlockContainer<DIV>) [513,11 240x22]
TextPaintable (TextNode<#text>)

View file

@ -5,7 +5,11 @@
</style></head><body> </style></head><body>
<textarea>Bonjour mon amis!</textarea> <textarea>Bonjour mon amis!</textarea>
<script> <script>
const textarea = document.createElement("textarea"); const textarea1 = document.createElement("textarea");
textarea.innerText = "Well hello friends!"; textarea1.innerText = "Well hello friends!";
document.body.appendChild(textarea); document.body.appendChild(textarea1);
const textarea2 = document.createElement("textarea");
document.body.appendChild(textarea2);
textarea2.value = "Tja hej vänner!";
</script> </script>

View file

@ -133,7 +133,10 @@ String HTMLTextAreaElement::value() const
// https://html.spec.whatwg.org/multipage/form-elements.html#dom-textarea-value // https://html.spec.whatwg.org/multipage/form-elements.html#dom-textarea-value
void HTMLTextAreaElement::set_value(String const& value) void HTMLTextAreaElement::set_value(String const& value)
{ {
// FIXME: 1. Let oldAPIValue be this element's API value. auto& realm = this->realm();
// 1. Let oldAPIValue be this element's API value.
auto old_api_value = api_value();
// 2. Set this element's raw value to the new value. // 2. Set this element's raw value to the new value.
set_raw_value(value); set_raw_value(value);
@ -141,8 +144,17 @@ void HTMLTextAreaElement::set_value(String const& value)
// 3. Set this element's dirty value flag to true. // 3. Set this element's dirty value flag to true.
m_dirty_value = true; m_dirty_value = true;
// FIXME: 4. If the new API value is different from oldAPIValue, then move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none". // 4. If the new API value is different from oldAPIValue, then move the text entry cursor position to the end of
update_placeholder_visibility(); // the text control, unselecting any selected text and resetting the selection direction to "none".
if (api_value() != old_api_value) {
if (m_text_node) {
m_text_node->set_data(m_raw_value);
update_placeholder_visibility();
if (auto* browsing_context = document().browsing_context())
browsing_context->set_cursor_position(DOM::Position::create(realm, *m_text_node, m_text_node->data().bytes().size()));
}
}
} }
void HTMLTextAreaElement::set_raw_value(String value) void HTMLTextAreaElement::set_raw_value(String value)