Improve ClientState compatibility with rx.input

reflex/components/chakra/forms/input.py

@@ -93,7 +93,7 @@ def create(cls, *children, **props) -> Component:
  Returns:
  The component.
  """
- if props.get("value") is not None and props.get("on_change"):
+ if props.get("value") is not None and props.get("on_change") is not None:
  # create a debounced input if the user requests full control to avoid typing jank
  return DebounceInput.create(super().create(*children, **props))
  return super().create(*children, **props)

reflex/components/chakra/forms/textarea.py

@@ -72,7 +72,7 @@ def create(cls, *children, **props) -> Component:
  Returns:
  The component.
  """
- if props.get("value") is not None and props.get("on_change"):
+ if props.get("value") is not None and props.get("on_change") is not None:
  # create a debounced input if the user requests full control to avoid typing jank
  return DebounceInput.create(super().create(*children, **props))
  return super().create(*children, **props)

reflex/components/radix/themes/components/text_area.py

@@ -106,7 +106,7 @@ def create(cls, *children, **props) -> Component:
  Returns:
  The component.
  """
- if props.get("value") is not None and props.get("on_change"):
+ if props.get("value") is not None and props.get("on_change") is not None:
  # create a debounced input if the user requests full control to avoid typing jank
  return DebounceInput.create(super().create(*children, **props))
  return super().create(*children, **props)

reflex/components/radix/themes/components/text_field.py

@@ -99,7 +99,7 @@ def create(cls, *children, **props) -> Component:
  The component.
  """
  component = super().create(*children, **props)
- if props.get("value") is not None and props.get("on_change"):
+ if props.get("value") is not None and props.get("on_change") is not None:
  # create a debounced input if the user requests full control to avoid typing jank
  return DebounceInput.create(component)
  return component

reflex/experimental/client_state.py

@@ -8,7 +8,7 @@
 from reflex import constants
 from reflex.event import EventChain, EventHandler, EventSpec, call_script
 from reflex.utils.imports import ImportVar
-from reflex.vars import Var, VarData
+from reflex.vars import Var, VarData, get_unique_variable_name
 
 NoValue = object()
 
@@ -74,7 +74,10 @@ def __hash__(self) -> int:
 
  @classmethod
  def create(
- cls, var_name: str, default: Any = NoValue, global_ref: bool = True
+ cls,
+ var_name: str | None = None,
+ default: Any = NoValue,
+ global_ref: bool = True,
  ) -> "ClientStateVar":
  """Create a local_state Var that can be accessed and updated on the client.
 
@@ -101,6 +104,8 @@ def create(
  Returns:
  ClientStateVar
  """
+ if var_name is None:
+ var_name = get_unique_variable_name()
  assert isinstance(var_name, str), "var_name must be a string."
  if default is NoValue:
  default_var = Var.create_safe("", _var_is_local=False, _var_is_string=False)
@@ -188,7 +193,7 @@ def set_value(self, value: Any = NoValue) -> Var:
  # This is a hack to make it work like an EventSpec taking an arg
  value = Var.create_safe(value, _var_is_string=isinstance(value, str))
  if not value._var_is_string and value._var_full_name.startswith("_"):
- arg = value._var_name_unwrapped
+ arg = value._var_name_unwrapped.partition(".")[0]
  else:
  arg = ""
  setter = f"({arg}) => {setter}({value._var_name_unwrapped})"

reflex/vars.py

@@ -1792,18 +1792,16 @@ def _var_name_unwrapped(self) -> str:
  """
  from reflex.style import Style
 
- type_ = (
- get_origin(self._var_type)
- if types.is_generic_alias(self._var_type)
- else self._var_type
- )
+ generic_alias = types.is_generic_alias(self._var_type)
+
+ type_ = get_origin(self._var_type) if generic_alias else self._var_type
  wrapped_var = str(self)
 
  return (
  wrapped_var
  if not self._var_state
- and types._issubclass(type_, dict)
- or types._issubclass(type_, Style)
+ and not generic_alias
+ and (types._issubclass(type_, dict) or types._issubclass(type_, Style))
  else wrapped_var.strip("{}")
  )