HTMLSelectElement.cpp 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650
  1. /*
  2. * Copyright (c) 2020, the SerenityOS developers.
  3. * Copyright (c) 2021-2022, Andreas Kling <andreas@ladybird.org>
  4. * Copyright (c) 2023, Bastiaan van der Plaat <bastiaan.v.d.plaat@gmail.com>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <LibWeb/Bindings/HTMLSelectElementPrototype.h>
  9. #include <LibWeb/Bindings/Intrinsics.h>
  10. #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/DOM/ElementFactory.h>
  13. #include <LibWeb/DOM/Event.h>
  14. #include <LibWeb/DOM/ShadowRoot.h>
  15. #include <LibWeb/HTML/EventNames.h>
  16. #include <LibWeb/HTML/HTMLFormElement.h>
  17. #include <LibWeb/HTML/HTMLHRElement.h>
  18. #include <LibWeb/HTML/HTMLOptGroupElement.h>
  19. #include <LibWeb/HTML/HTMLOptionElement.h>
  20. #include <LibWeb/HTML/HTMLSelectElement.h>
  21. #include <LibWeb/HTML/Numbers.h>
  22. #include <LibWeb/HTML/Window.h>
  23. #include <LibWeb/Infra/Strings.h>
  24. #include <LibWeb/Layout/Node.h>
  25. #include <LibWeb/Namespace.h>
  26. #include <LibWeb/Page/Page.h>
  27. #include <LibWeb/Painting/Paintable.h>
  28. namespace Web::HTML {
  29. GC_DEFINE_ALLOCATOR(HTMLSelectElement);
  30. HTMLSelectElement::HTMLSelectElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  31. : HTMLElement(document, move(qualified_name))
  32. {
  33. }
  34. HTMLSelectElement::~HTMLSelectElement() = default;
  35. void HTMLSelectElement::initialize(JS::Realm& realm)
  36. {
  37. Base::initialize(realm);
  38. WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLSelectElement);
  39. }
  40. void HTMLSelectElement::visit_edges(Cell::Visitor& visitor)
  41. {
  42. Base::visit_edges(visitor);
  43. visitor.visit(m_options);
  44. visitor.visit(m_selected_options);
  45. visitor.visit(m_inner_text_element);
  46. visitor.visit(m_chevron_icon_element);
  47. for (auto const& item : m_select_items) {
  48. if (item.has<SelectItemOption>())
  49. visitor.visit(item.get<SelectItemOption>().option_element);
  50. if (item.has<SelectItemOptionGroup>()) {
  51. auto item_option_group = item.get<SelectItemOptionGroup>();
  52. for (auto const& item : item_option_group.items)
  53. visitor.visit(item.option_element);
  54. }
  55. }
  56. }
  57. void HTMLSelectElement::adjust_computed_style(CSS::StyleProperties& style)
  58. {
  59. // https://drafts.csswg.org/css-display-3/#unbox
  60. if (style.display().is_contents())
  61. style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::None)));
  62. // AD-HOC: We rewrite `display: inline` to `display: inline-block`.
  63. // This is required for the internal shadow tree to work correctly in layout.
  64. if (style.display().is_inline_outside() && style.display().is_flow_inside())
  65. style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::InlineBlock)));
  66. }
  67. // https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-size
  68. u32 HTMLSelectElement::display_size() const
  69. {
  70. // The size IDL attribute must reflect the respective content attributes of the same name. The size IDL attribute has a default value of 0.
  71. if (auto size_string = get_attribute(HTML::AttributeNames::size); size_string.has_value()) {
  72. // The display size of a select element is the result of applying the rules for parsing non-negative integers
  73. // to the value of element's size attribute, if it has one and parsing it is successful.
  74. if (auto size = parse_non_negative_integer(*size_string); size.has_value())
  75. return *size;
  76. }
  77. // If applying those rules to the attribute's value is not successful or if the size attribute is absent,
  78. // then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.
  79. if (has_attribute(AttributeNames::multiple))
  80. return 4;
  81. return 1;
  82. }
  83. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-size
  84. WebIDL::UnsignedLong HTMLSelectElement::size() const
  85. {
  86. // The multiple, required, and size IDL attributes must reflect the respective content attributes of the same name. The size IDL attribute has a default value of 0.
  87. if (auto size_string = get_attribute(HTML::AttributeNames::size); size_string.has_value()) {
  88. if (auto size = parse_non_negative_integer(*size_string); size.has_value() && *size <= 2147483647)
  89. return *size;
  90. }
  91. return 0;
  92. }
  93. WebIDL::ExceptionOr<void> HTMLSelectElement::set_size(WebIDL::UnsignedLong size)
  94. {
  95. if (size > 2147483647)
  96. size = 0;
  97. return set_attribute(HTML::AttributeNames::size, String::number(size));
  98. }
  99. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-options
  100. GC::Ptr<HTMLOptionsCollection> const& HTMLSelectElement::options()
  101. {
  102. if (!m_options) {
  103. m_options = HTMLOptionsCollection::create(*this, [](DOM::Element const& element) {
  104. // https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-option-list
  105. // The list of options for a select element consists of all the option element children of
  106. // the select element, and all the option element children of all the optgroup element children
  107. // of the select element, in tree order.
  108. return is<HTMLOptionElement>(element);
  109. });
  110. }
  111. return m_options;
  112. }
  113. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-length
  114. WebIDL::UnsignedLong HTMLSelectElement::length()
  115. {
  116. // The length IDL attribute must return the number of nodes represented by the options collection. On setting, it must act like the attribute of the same name on the options collection.
  117. return const_cast<HTMLOptionsCollection&>(*options()).length();
  118. }
  119. WebIDL::ExceptionOr<void> HTMLSelectElement::set_length(WebIDL::UnsignedLong length)
  120. {
  121. // On setting, it must act like the attribute of the same name on the options collection.
  122. return const_cast<HTMLOptionsCollection&>(*options()).set_length(length);
  123. }
  124. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-item
  125. HTMLOptionElement* HTMLSelectElement::item(WebIDL::UnsignedLong index)
  126. {
  127. // The item(index) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.
  128. return verify_cast<HTMLOptionElement>(const_cast<HTMLOptionsCollection&>(*options()).item(index));
  129. }
  130. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-nameditem
  131. HTMLOptionElement* HTMLSelectElement::named_item(FlyString const& name)
  132. {
  133. // The namedItem(name) method must return the value returned by the method of the same name on the options collection, when invoked with the same argument.
  134. return verify_cast<HTMLOptionElement>(const_cast<HTMLOptionsCollection&>(*options()).named_item(name));
  135. }
  136. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-add
  137. WebIDL::ExceptionOr<void> HTMLSelectElement::add(HTMLOptionOrOptGroupElement element, Optional<HTMLElementOrElementIndex> before)
  138. {
  139. // Similarly, the add(element, before) method must act like its namesake method on that same options collection.
  140. TRY(const_cast<HTMLOptionsCollection&>(*options()).add(move(element), move(before)));
  141. update_selectedness(); // Not in spec
  142. return {};
  143. }
  144. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-remove
  145. void HTMLSelectElement::remove()
  146. {
  147. // The remove() method must act like its namesake method on that same options collection when it has arguments,
  148. // and like its namesake method on the ChildNode interface implemented by the HTMLSelectElement ancestor interface Element when it has no arguments.
  149. ChildNode::remove_binding();
  150. }
  151. void HTMLSelectElement::remove(WebIDL::Long index)
  152. {
  153. const_cast<HTMLOptionsCollection&>(*options()).remove(index);
  154. }
  155. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-selectedoptions
  156. GC::Ref<DOM::HTMLCollection> HTMLSelectElement::selected_options()
  157. {
  158. // The selectedOptions IDL attribute must return an HTMLCollection rooted at the select node,
  159. // whose filter matches the elements in the list of options that have their selectedness set to true.
  160. if (!m_selected_options) {
  161. m_selected_options = DOM::HTMLCollection::create(*this, DOM::HTMLCollection::Scope::Descendants, [](Element const& element) {
  162. if (is<HTML::HTMLOptionElement>(element)) {
  163. auto const& option_element = verify_cast<HTMLOptionElement>(element);
  164. return option_element.selected();
  165. }
  166. return false;
  167. });
  168. }
  169. return *m_selected_options;
  170. }
  171. // https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-option-list
  172. Vector<GC::Root<HTMLOptionElement>> HTMLSelectElement::list_of_options() const
  173. {
  174. // 1. Let options be « ».
  175. Vector<GC::Root<HTMLOptionElement>> options;
  176. // 2. For each node of select's descendants in tree order except the descendants which are select elements and their subtrees:
  177. for_each_in_subtree([&](auto& node) {
  178. if (is<HTMLSelectElement>(node))
  179. return TraversalDecision::Break;
  180. // 1. If node is an option element, then append node to options.
  181. if (is<HTMLOptionElement>(node))
  182. options.append(GC::make_root(const_cast<HTMLOptionElement&>(static_cast<HTMLOptionElement const&>(node))));
  183. return TraversalDecision::Continue;
  184. });
  185. // 3. Return options.
  186. return options;
  187. }
  188. // https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element:concept-form-reset-control
  189. void HTMLSelectElement::reset_algorithm()
  190. {
  191. // The reset algorithm for select elements is to go through all the option elements in the element's list of options,
  192. for (auto const& option_element : list_of_options()) {
  193. // set their selectedness to true if the option element has a selected attribute, and false otherwise,
  194. option_element->set_selected_internal(option_element->has_attribute(AttributeNames::selected));
  195. // set their dirtiness to false,
  196. option_element->m_dirty = false;
  197. // and then have the option elements ask for a reset.
  198. option_element->ask_for_a_reset();
  199. }
  200. }
  201. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-selectedindex
  202. WebIDL::Long HTMLSelectElement::selected_index() const
  203. {
  204. // The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options
  205. // in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.
  206. WebIDL::Long index = 0;
  207. for (auto const& option_element : list_of_options()) {
  208. if (option_element->selected())
  209. return index;
  210. ++index;
  211. }
  212. return -1;
  213. }
  214. void HTMLSelectElement::set_selected_index(WebIDL::Long index)
  215. {
  216. // On setting, the selectedIndex attribute must set the selectedness of all the option elements in the list of options to false,
  217. // and then the option element in the list of options whose index is the given new value,
  218. // if any, must have its selectedness set to true and its dirtiness set to true.
  219. auto options = list_of_options();
  220. for (auto& option : options)
  221. option->set_selected_internal(false);
  222. if (index < 0 || index >= static_cast<int>(options.size()))
  223. return;
  224. auto& selected_option = options[index];
  225. selected_option->set_selected_internal(true);
  226. selected_option->m_dirty = true;
  227. }
  228. // https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
  229. i32 HTMLSelectElement::default_tab_index_value() const
  230. {
  231. // See the base function for the spec comments.
  232. return 0;
  233. }
  234. void HTMLSelectElement::children_changed()
  235. {
  236. Base::children_changed();
  237. update_selectedness();
  238. }
  239. // https://html.spec.whatwg.org/multipage/form-elements.html#dom-select-type
  240. String const& HTMLSelectElement::type() const
  241. {
  242. // The type IDL attribute, on getting, must return the string "select-one" if the multiple attribute is absent, and the string "select-multiple" if the multiple attribute is present.
  243. static String const select_one = "select-one"_string;
  244. static String const select_multiple = "select-multiple"_string;
  245. if (!has_attribute(AttributeNames::multiple))
  246. return select_one;
  247. return select_multiple;
  248. }
  249. Optional<ARIA::Role> HTMLSelectElement::default_role() const
  250. {
  251. // https://www.w3.org/TR/html-aria/#el-select-multiple-or-size-greater-1
  252. if (has_attribute(AttributeNames::multiple))
  253. return ARIA::Role::listbox;
  254. if (has_attribute(AttributeNames::size)) {
  255. if (auto size_string = get_attribute(HTML::AttributeNames::size); size_string.has_value()) {
  256. if (auto size = size_string->to_number<int>(); size.has_value() && *size > 1)
  257. return ARIA::Role::listbox;
  258. }
  259. }
  260. // https://www.w3.org/TR/html-aria/#el-select
  261. return ARIA::Role::combobox;
  262. }
  263. String HTMLSelectElement::value() const
  264. {
  265. for (auto const& option_element : list_of_options())
  266. if (option_element->selected())
  267. return option_element->value();
  268. return ""_string;
  269. }
  270. WebIDL::ExceptionOr<void> HTMLSelectElement::set_value(String const& value)
  271. {
  272. for (auto const& option_element : list_of_options())
  273. option_element->set_selected(option_element->value() == value);
  274. update_inner_text_element();
  275. return {};
  276. }
  277. void HTMLSelectElement::queue_input_and_change_events()
  278. {
  279. // When the user agent is to send select update notifications, queue an element task on the user interaction task source given the select element to run these steps:
  280. queue_an_element_task(HTML::Task::Source::UserInteraction, [this] {
  281. // FIXME: 1. Set the select element's user interacted to true.
  282. // 2. Fire an event named input at the select element, with the bubbles and composed attributes initialized to true.
  283. auto input_event = DOM::Event::create(realm(), HTML::EventNames::input);
  284. input_event->set_bubbles(true);
  285. input_event->set_composed(true);
  286. dispatch_event(input_event);
  287. // 3. Fire an event named change at the select element, with the bubbles attribute initialized to true.
  288. auto change_event = DOM::Event::create(realm(), HTML::EventNames::change);
  289. change_event->set_bubbles(true);
  290. dispatch_event(*change_event);
  291. });
  292. }
  293. void HTMLSelectElement::set_is_open(bool open)
  294. {
  295. if (open == m_is_open)
  296. return;
  297. m_is_open = open;
  298. invalidate_style(DOM::StyleInvalidationReason::HTMLSelectElementSetIsOpen);
  299. }
  300. bool HTMLSelectElement::has_activation_behavior() const
  301. {
  302. return true;
  303. }
  304. static String strip_newlines(Optional<String> string)
  305. {
  306. // FIXME: Move this to a more general function
  307. if (!string.has_value())
  308. return {};
  309. StringBuilder builder;
  310. for (auto c : string.value().bytes_as_string_view()) {
  311. if (c == '\r' || c == '\n') {
  312. builder.append(' ');
  313. } else {
  314. builder.append(c);
  315. }
  316. }
  317. return MUST(Infra::strip_and_collapse_whitespace(MUST(builder.to_string())));
  318. }
  319. // https://html.spec.whatwg.org/multipage/input.html#show-the-picker,-if-applicable
  320. void HTMLSelectElement::show_the_picker_if_applicable()
  321. {
  322. // FIXME: Deduplicate with HTMLInputElement
  323. // To show the picker, if applicable for a select element:
  324. // 1. If element's relevant global object does not have transient activation, then return.
  325. auto& global_object = relevant_global_object(*this);
  326. if (!is<HTML::Window>(global_object))
  327. return;
  328. auto& relevant_global_object = static_cast<HTML::Window&>(global_object);
  329. if (!relevant_global_object.has_transient_activation())
  330. return;
  331. // 2. If element is not mutable, then return.
  332. if (!enabled())
  333. return;
  334. // 3. Consume user activation given element's relevant global object.
  335. relevant_global_object.consume_user_activation();
  336. // 4. If element's type attribute is in the File Upload state, then run these steps in parallel:
  337. // Not Applicable to select elements
  338. // 5. Otherwise, the user agent should show any relevant user interface for selecting a value for element,
  339. // in the way it normally would when the user interacts with the control. (If no such UI applies to element, then this step does nothing.)
  340. // If such a user interface is shown, it must respect the requirements stated in the relevant parts of the specification for how element
  341. // behaves given its type attribute state. (For example, various sections describe restrictions on the resulting value string.)
  342. // This step can have side effects, such as closing other pickers that were previously shown by this algorithm.
  343. // (If this closes a file selection picker, then per the above that will lead to firing either input and change events, or a cancel event.)
  344. // Populate select items
  345. m_select_items.clear();
  346. u32 id_counter = 1;
  347. for (auto const& child : children_as_vector()) {
  348. if (is<HTMLOptGroupElement>(*child)) {
  349. auto& opt_group_element = verify_cast<HTMLOptGroupElement>(*child);
  350. Vector<SelectItemOption> option_group_items;
  351. for (auto const& child : opt_group_element.children_as_vector()) {
  352. if (is<HTMLOptionElement>(*child)) {
  353. auto& option_element = verify_cast<HTMLOptionElement>(*child);
  354. option_group_items.append(SelectItemOption { id_counter++, option_element.selected(), option_element.disabled(), option_element, strip_newlines(option_element.text_content()), option_element.value() });
  355. }
  356. }
  357. m_select_items.append(SelectItemOptionGroup { opt_group_element.get_attribute(AttributeNames::label).value_or(String {}), option_group_items });
  358. }
  359. if (is<HTMLOptionElement>(*child)) {
  360. auto& option_element = verify_cast<HTMLOptionElement>(*child);
  361. m_select_items.append(SelectItemOption { id_counter++, option_element.selected(), option_element.disabled(), option_element, strip_newlines(option_element.text_content()), option_element.value() });
  362. }
  363. if (is<HTMLHRElement>(*child))
  364. m_select_items.append(SelectItemSeparator {});
  365. }
  366. // Request select dropdown
  367. auto weak_element = make_weak_ptr<HTMLSelectElement>();
  368. auto rect = get_bounding_client_rect();
  369. auto position = document().navigable()->to_top_level_position(Web::CSSPixelPoint { rect->x(), rect->y() });
  370. document().page().did_request_select_dropdown(weak_element, position, CSSPixels(rect->width()), m_select_items);
  371. set_is_open(true);
  372. }
  373. // https://html.spec.whatwg.org/multipage/input.html#dom-select-showpicker
  374. WebIDL::ExceptionOr<void> HTMLSelectElement::show_picker()
  375. {
  376. // FIXME: Deduplicate with HTMLInputElement
  377. // The showPicker() method steps are:
  378. // 1. If this is not mutable, then throw an "InvalidStateError" DOMException.
  379. if (!enabled())
  380. return WebIDL::InvalidStateError::create(realm(), "Element is not mutable"_string);
  381. // 2. If this's relevant settings object's origin is not same origin with this's relevant settings object's top-level origin,
  382. // and this is a select element, then throw a "SecurityError" DOMException.
  383. if (!relevant_settings_object(*this).origin().is_same_origin(relevant_settings_object(*this).top_level_origin)) {
  384. return WebIDL::SecurityError::create(realm(), "Cross origin pickers are not allowed"_string);
  385. }
  386. // 3. If this's relevant global object does not have transient activation, then throw a "NotAllowedError" DOMException.
  387. // FIXME: The global object we get here should probably not need casted to Window to check for transient activation
  388. auto& global_object = relevant_global_object(*this);
  389. if (!is<HTML::Window>(global_object) || !static_cast<HTML::Window&>(global_object).has_transient_activation()) {
  390. return WebIDL::NotAllowedError::create(realm(), "Too long since user activation to show picker"_string);
  391. }
  392. // FIXME: 4. If this is a select element, and this is not being rendered, then throw a "NotSupportedError" DOMException.
  393. // 5. Show the picker, if applicable, for this.
  394. show_the_picker_if_applicable();
  395. return {};
  396. }
  397. void HTMLSelectElement::activation_behavior(DOM::Event const& event)
  398. {
  399. if (event.is_trusted())
  400. show_the_picker_if_applicable();
  401. }
  402. void HTMLSelectElement::did_select_item(Optional<u32> const& id)
  403. {
  404. set_is_open(false);
  405. if (!id.has_value())
  406. return;
  407. for (auto const& option_element : list_of_options())
  408. option_element->set_selected(false);
  409. for (auto const& item : m_select_items) {
  410. if (item.has<SelectItemOption>()) {
  411. auto const& item_option = item.get<SelectItemOption>();
  412. if (item_option.id == *id)
  413. item_option.option_element->set_selected(true);
  414. }
  415. if (item.has<SelectItemOptionGroup>()) {
  416. auto item_option_group = item.get<SelectItemOptionGroup>();
  417. for (auto const& item_option : item_option_group.items) {
  418. if (item_option.id == *id)
  419. item_option.option_element->set_selected(true);
  420. }
  421. }
  422. }
  423. update_inner_text_element();
  424. queue_input_and_change_events();
  425. }
  426. void HTMLSelectElement::form_associated_element_was_inserted()
  427. {
  428. create_shadow_tree_if_needed();
  429. // Wait until children are ready
  430. queue_an_element_task(HTML::Task::Source::Microtask, [this] {
  431. update_selectedness();
  432. });
  433. }
  434. void HTMLSelectElement::form_associated_element_was_removed(DOM::Node*)
  435. {
  436. set_shadow_root(nullptr);
  437. }
  438. void HTMLSelectElement::computed_css_values_changed()
  439. {
  440. // Hide chevron icon when appearance is none
  441. if (m_chevron_icon_element) {
  442. auto appearance = computed_css_values()->appearance();
  443. if (appearance.has_value() && *appearance == CSS::Appearance::None) {
  444. MUST(m_chevron_icon_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "none"_string));
  445. } else {
  446. MUST(m_chevron_icon_element->style_for_bindings()->set_property(CSS::PropertyID::Display, "block"_string));
  447. }
  448. }
  449. }
  450. void HTMLSelectElement::create_shadow_tree_if_needed()
  451. {
  452. if (shadow_root())
  453. return;
  454. auto shadow_root = realm().create<DOM::ShadowRoot>(document(), *this, Bindings::ShadowRootMode::Closed);
  455. set_shadow_root(shadow_root);
  456. auto border = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  457. MUST(border->set_attribute(HTML::AttributeNames::style, R"~~~(
  458. display: flex;
  459. align-items: center;
  460. height: 100%;
  461. )~~~"_string));
  462. MUST(shadow_root->append_child(border));
  463. m_inner_text_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  464. MUST(m_inner_text_element->set_attribute(HTML::AttributeNames::style, R"~~~(
  465. flex: 1;
  466. )~~~"_string));
  467. MUST(border->append_child(*m_inner_text_element));
  468. // FIXME: Find better way to add chevron icon
  469. auto chevron_fill_color = document().page().palette().base_text();
  470. auto chevron_svg = MUST(String::formatted("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"{}\" d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\"/></svg>", chevron_fill_color));
  471. m_chevron_icon_element = DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML).release_value_but_fixme_should_propagate_errors();
  472. MUST(m_chevron_icon_element->set_attribute(HTML::AttributeNames::style, R"~~~(
  473. width: 16px;
  474. height: 16px;
  475. margin-left: 4px;
  476. )~~~"_string));
  477. MUST(m_chevron_icon_element->set_inner_html(chevron_svg));
  478. MUST(border->append_child(*m_chevron_icon_element));
  479. update_inner_text_element();
  480. }
  481. void HTMLSelectElement::update_inner_text_element()
  482. {
  483. if (!m_inner_text_element)
  484. return;
  485. // Update inner text element to text content of selected option
  486. for (auto const& option_element : list_of_options()) {
  487. if (option_element->selected()) {
  488. m_inner_text_element->set_text_content(strip_newlines(option_element->text_content()));
  489. return;
  490. }
  491. }
  492. }
  493. // https://html.spec.whatwg.org/multipage/form-elements.html#selectedness-setting-algorithm
  494. void HTMLSelectElement::update_selectedness()
  495. {
  496. if (has_attribute(AttributeNames::multiple))
  497. return;
  498. // If element's multiple attribute is absent, and element's display size is 1,
  499. if (display_size() == 1) {
  500. bool has_selected_elements = false;
  501. for (auto const& option_element : list_of_options()) {
  502. if (option_element->selected()) {
  503. has_selected_elements = true;
  504. break;
  505. }
  506. }
  507. // and no option elements in the element's list of options have their selectedness set to true,
  508. if (!has_selected_elements) {
  509. // then set the selectedness of the first option element in the list of options in tree order
  510. // that is not disabled, if any, to true, and return.
  511. for (auto const& option_element : list_of_options()) {
  512. if (!option_element->disabled()) {
  513. option_element->set_selected_internal(true);
  514. update_inner_text_element();
  515. break;
  516. }
  517. }
  518. return;
  519. }
  520. }
  521. // If element's multiple attribute is absent,
  522. // and two or more option elements in element's list of options have their selectedness set to true,
  523. // then set the selectedness of all but the last option element with its selectedness set to true
  524. // in the list of options in tree order to false.
  525. int number_of_selected = 0;
  526. for (auto const& option_element : list_of_options()) {
  527. if (option_element->selected())
  528. ++number_of_selected;
  529. }
  530. // and two or more option elements in element's list of options have their selectedness set to true,
  531. if (number_of_selected >= 2) {
  532. // then set the selectedness of all but the last option element with its selectedness set to true
  533. // in the list of options in tree order to false.
  534. GC::Ptr<HTML::HTMLOptionElement> last_selected_option;
  535. u64 last_selected_option_update_index = 0;
  536. for (auto const& option_element : list_of_options()) {
  537. if (!option_element->selected())
  538. continue;
  539. if (!last_selected_option
  540. || option_element->selectedness_update_index() > last_selected_option_update_index) {
  541. last_selected_option = option_element;
  542. last_selected_option_update_index = option_element->selectedness_update_index();
  543. }
  544. }
  545. for (auto const& option_element : list_of_options()) {
  546. if (option_element != last_selected_option)
  547. option_element->set_selected_internal(false);
  548. }
  549. }
  550. update_inner_text_element();
  551. }
  552. bool HTMLSelectElement::is_focusable() const
  553. {
  554. return enabled();
  555. }
  556. }