Apply suggestion

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This commit is contained in:
stevennovaryo 2025-05-23 18:27:41 +08:00
parent eb393b944f
commit dc0b467dcb
3 changed files with 22 additions and 17 deletions

View file

@ -1556,12 +1556,12 @@ impl Document {
return; return;
} }
// For a node within a text input UA shadow DOM, redirect the focus target into its shadow host. // For a node within a text input UA shadow DOM, delegate the focus target into its shadow host.
// TODO: This focus delegation should be done with shadow DOM delegateFocus attribute.
let target_el = el.find_focusable_shadow_host_if_necessary(); let target_el = el.find_focusable_shadow_host_if_necessary();
self.begin_focus_transaction(); self.begin_focus_transaction();
// Try to focus `el`. If it's not focusable, focus the document // Try to focus `el`. If it's not focusable, focus the document
// instead.
self.request_focus(None, FocusInitiator::Local, can_gc); self.request_focus(None, FocusInitiator::Local, can_gc);
self.request_focus(target_el.as_deref(), FocusInitiator::Local, can_gc); self.request_focus(target_el.as_deref(), FocusInitiator::Local, can_gc);
} }

View file

@ -116,7 +116,7 @@ const DEFAULT_FILE_INPUT_VALUE: &str = "No file chosen";
/// </input> /// </input>
/// ``` /// ```
// TODO(stevennovaryo): We are trying to use CSS to mimic Chrome and Firefox's layout for the <input> element. // TODO(stevennovaryo): We are trying to use CSS to mimic Chrome and Firefox's layout for the <input> element.
// But this does have some discrepencies. For example, they would try to vertically align // But this does have some discrepancies. For example, they would try to vertically align
// <input> text baseline with the baseline of other TextNode within an inline flow. // <input> text baseline with the baseline of other TextNode within an inline flow.
struct InputTypeTextShadowTree { struct InputTypeTextShadowTree {
text_container: Dom<HTMLDivElement>, text_container: Dom<HTMLDivElement>,
@ -135,7 +135,7 @@ struct InputTypeColorShadowTree {
// FIXME: These styles should be inside UA stylesheet, but it is not possible without internal pseudo element support. // FIXME: These styles should be inside UA stylesheet, but it is not possible without internal pseudo element support.
const TEXT_TREE_STYLE: &str = " const TEXT_TREE_STYLE: &str = "
#input-editor::selection, #input-placeholder::selection { #input-editor::selection {
background: rgba(176, 214, 255, 1.0); background: rgba(176, 214, 255, 1.0);
color: black; color: black;
} }
@ -144,14 +144,14 @@ const TEXT_TREE_STYLE: &str = "
visibility: hidden !important visibility: hidden !important
} }
#input-container { #input-editor {
position: relative !important; pointer-events: auto;
height: 100% !important;
pointer-events: none !important;
} }
#input-editor { #input-container {
pointer-events: auto !important; position: relative;
height: 100%;
pointer-events: none;
} }
#input-editor, #input-placeholder { #input-editor, #input-placeholder {
@ -1131,7 +1131,7 @@ impl HTMLInputElement {
ShadowRootMode::Closed, ShadowRootMode::Closed,
false, false,
false, false,
false, true,
SlotAssignmentMode::Manual, SlotAssignmentMode::Manual,
can_gc, can_gc,
) )
@ -1309,11 +1309,6 @@ impl HTMLInputElement {
true => "\u{200B}".into(), true => "\u{200B}".into(),
}; };
// TODO(stevennovaryo): Introduce caching to prevent costly update.
text_shadow_tree
.placeholder_container
.upcast::<Node>()
.SetTextContent(Some(self.placeholder.to_owned().take()), can_gc);
text_shadow_tree text_shadow_tree
.text_container .text_container
.upcast::<Node>() .upcast::<Node>()
@ -2909,11 +2904,21 @@ impl VirtualMethods for HTMLInputElement {
local_name!("placeholder") => { local_name!("placeholder") => {
{ {
let mut placeholder = self.placeholder.borrow_mut(); let mut placeholder = self.placeholder.borrow_mut();
let old_placeholder = placeholder.clone();
placeholder.clear(); placeholder.clear();
if let AttributeMutation::Set(_) = mutation { if let AttributeMutation::Set(_) = mutation {
placeholder placeholder
.extend(attr.value().chars().filter(|&c| c != '\n' && c != '\r')); .extend(attr.value().chars().filter(|&c| c != '\n' && c != '\r'));
} }
// If old placeholder is not the same as the new one,
// we need to update the shadow tree.
if old_placeholder != *placeholder {
self.text_shadow_tree(can_gc)
.placeholder_container
.upcast::<Node>()
.SetTextContent(Some(placeholder.clone()), can_gc);
}
} }
self.update_placeholder_shown_state(); self.update_placeholder_shown_state();
}, },

View file

@ -233,7 +233,7 @@ bitflags! {
/// Whether this node has a serve as the text container for editable content of /// Whether this node has a serve as the text container for editable content of
/// <input> or <textarea> element. /// <input> or <textarea> element.
const IS_TEXT_CONTROL_INNER_EDITOR = 1 << 13; const IS_TEXT_CONTROL_INNER_EDITOR = 1 << 12;
} }
} }