added read_only option to DropdownMenu and TextInput

client_code/_Components/DropdownMenu/__init__.py

@@ -189,6 +189,8 @@ def _handle_component_click(self, event):
   def _set_menu_visibility(self, value=None):
     if value is None:
       value = not self.menu.visible
+    if self.read_only:
+        value = False
 
     self.menu.visible = value
     self._menuNode.classList.toggle("anvil-m3-menu-hidden", not value)
@@ -216,7 +218,7 @@ def _set_menu_visibility(self, value=None):
           ].scrollIntoView({'block': 'nearest'})
 
     else:
-      self.selection_field.trailing_icon = "mi:arrow_drop_down"
+      self.selection_field.trailing_icon = "" if self.read_only else "mi:arrow_drop_down"
       if self.selected_value is None:
         self._hoverIndex = None
 
@@ -354,6 +356,13 @@ def enabled(self, value) -> bool:
     """If True, this component allows user interaction."""
     self.selection_field.enabled = value
 
+  @anvil_prop
+  @property
+  def read_only(self, value) -> bool:
+    """If True, this component won't allow it's value to be changed."""
+    self.selection_field.read_only = value
+    self._set_menu_visibility(False)
+
   @anvil_prop
   @property
   def appearance(self, value) -> str:

client_code/_Components/DropdownMenu/form_template.yaml

@@ -29,6 +29,7 @@ properties:
 - {default_value: false, description: 'If True, the label text will be bold', group: Label Style, important: false, name: label_bold, type: boolean}
 - {description: Use this property to store any extra data for the component., group: Other, important: false, name: tag, type: object}
 - {default_value: true, description: 'If True, this component allows user interaction.', designerHint: enabled, designer_hint: enabled, group: Interaction, important: true, name: enabled, type: boolean}
+- {default_value: false, description: 'If True, this component won''t allow it''s value to be changed.', group: Interaction, important: true, name: read_only, type: boolean}
 - {default_value: '', description: The font family to use for this component's label, group: Label Style, important: false, name: label_font_family, type: string}
 - {description: The height of text displayed on this component's label in pixels, group: Label Style, important: false, name: label_font_size, type: number}
 - {default_value: '', description: The colour of the label text on the component., group: Label Style, important: false, name: label_color, type: color}

client_code/_Components/TextInput/TextArea.py

@@ -52,6 +52,7 @@ def __init__(self, **properties):
     self.label = self.label
     self.text = self.text
     self.enabled = self.enabled
+    self.read_only = self.read_only
     self.height = self.height
     self.character_limit = self.character_limit
 
@@ -173,6 +174,15 @@ def enabled(self, value) -> bool:
       self.dom_nodes['anvil-m3-textarea'].setAttribute("disabled", " ")
       supporting_text.classList.add("anvil-m3-textinput-disabled")
 
+  @anvil_prop
+  @property
+  def read_only(self, value) -> bool:
+    """If True, this component won't allow it's value to be changed."""
+    if value:
+      self.dom_nodes['anvil-m3-textarea'].setAttribute("readonly", " ")
+    else:
+      self.dom_nodes['anvil-m3-textarea'].removeAttribute("readonly")
+
   @property
   def height(self):
     return self.dom_nodes['anvil-m3-textarea'].scrollHeight

client_code/_Components/TextInput/TextBox.py

@@ -121,6 +121,7 @@ def __init__(self, **properties):
     self.text = self.text
     self.label = self.label
     self.enabled = self.enabled
+    self.read_only = self.read_only
     self.error = self.error
     self.leading_icon = self.leading_icon
     self.character_limit = self.character_limit
@@ -246,6 +247,15 @@ def enabled(self, value) -> bool:
       supporting_text.classList.add("anvil-m3-textinput-disabled")
       trailing_icon.classList.add("anvil-m3-disable-icon")
 
+  @anvil_prop
+  @property
+  def read_only(self, value) -> bool:
+    """If True, this component won't allow it's value to be changed."""
+    if value:
+      self.dom_nodes['anvil-m3-textbox'].setAttribute("readonly", " ")
+    else:
+      self.dom_nodes['anvil-m3-textbox'].removeAttribute("readonly")
+
   @anvil_prop
   @property
   def error(self, value) -> bool:

client_code/_Components/TextInput/form_template.yaml

@@ -48,6 +48,7 @@ properties:
 - {default_value: '', description: The colour of the input text displayed on this component., group: Display Style, important: false, name: display_text_color, type: color}
 - {description: The font size of the input and placeholder text., group: Display Style, important: false, name: display_font_size, type: number}
 - {default_value: true, description: 'If True, this component allows user interaction.', designer_hint: enabled, group: Interaction, important: true, name: enabled, type: boolean}
+- {default_value: false, description: 'If True, this component won''t allow it''s value to be changed', group: Interaction, important: true, name: read_only, type: boolean}
 - {default_value: false, description: 'If True, this component is in an error state.', designer_hint: toggle, group: Interaction, important: false, name: error, type: boolean}
 - {description: The margin (pixels) of this component., group: Layout, important: true, name: margin, type: margin}
 - {default_value: '', description: The colour of the background of this component., group: Look and Feel, important: false, name: background_color, type: color}