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;
}
// 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();
self.begin_focus_transaction();
// Try to focus `el`. If it's not focusable, focus the document
// instead.
self.request_focus(None, 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>
/// ```
// 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.
struct InputTypeTextShadowTree {
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.
const TEXT_TREE_STYLE: &str = "
#input-editor::selection, #input-placeholder::selection {
#input-editor::selection {
background: rgba(176, 214, 255, 1.0);
color: black;
}
@ -144,14 +144,14 @@ const TEXT_TREE_STYLE: &str = "
visibility: hidden !important
}
#input-container {
position: relative !important;
height: 100% !important;
pointer-events: none !important;
#input-editor {
pointer-events: auto;
}
#input-editor {
pointer-events: auto !important;
#input-container {
position: relative;
height: 100%;
pointer-events: none;
}
#input-editor, #input-placeholder {
@ -1131,7 +1131,7 @@ impl HTMLInputElement {
ShadowRootMode::Closed,
false,
false,
false,
true,
SlotAssignmentMode::Manual,
can_gc,
)
@ -1309,11 +1309,6 @@ impl HTMLInputElement {
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_container
.upcast::<Node>()
@ -2909,11 +2904,21 @@ impl VirtualMethods for HTMLInputElement {
local_name!("placeholder") => {
{
let mut placeholder = self.placeholder.borrow_mut();
let old_placeholder = placeholder.clone();
placeholder.clear();
if let AttributeMutation::Set(_) = mutation {
placeholder
.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();
},

View file

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