From 593a0229fa700713e0e40db4d92d99ec5e070ed1 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Thu, 10 Oct 2024 09:38:19 -0700
Subject: [PATCH] Ignore special_attributes logic for defined props

---
 reflex/components/component.py           |  4 +++-
 tests/units/components/test_component.py | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index 117ae0c2b..364353b9d 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -477,7 +477,9 @@ class Component(BaseComponent, ABC):
 
         # Place data_ and aria_ attributes into custom_attrs
         special_attributes = tuple(
-            key for key in kwargs if SpecialAttributes.is_special(key)
+            key
+            for key in kwargs
+            if key not in fields and SpecialAttributes.is_special(key)
         )
         if special_attributes:
             custom_attrs = kwargs.setdefault("custom_attrs", {})
diff --git a/tests/units/components/test_component.py b/tests/units/components/test_component.py
index 517eb8887..713faa31c 100644
--- a/tests/units/components/test_component.py
+++ b/tests/units/components/test_component.py
@@ -2217,6 +2217,13 @@ def test_has_state_event_triggers(component, output):
     assert component._has_stateful_event_triggers() == output
 
 
+class SpecialComponent(Box):
+    """A special component with custom attributes."""
+
+    data_prop: Var[str]
+    aria_prop: Var[str]
+
+
 @pytest.mark.parametrize(
     ("component_kwargs", "exp_custom_attrs", "exp_style"),
     [
@@ -2235,6 +2242,16 @@ def test_has_state_event_triggers(component, output):
             {"data-existing": "test", "data-new": "test"},
             {},
         ),
+        (
+            {"data_test": "test", "data_prop": "prop"},
+            {"data-test": "test"},
+            {},
+        ),
+        (
+            {"aria_test": "test", "aria_prop": "prop"},
+            {"aria-test": "test"},
+            {},
+        ),
     ],
 )
 def test_special_props(component_kwargs, exp_custom_attrs, exp_style):
@@ -2245,6 +2262,9 @@ def test_special_props(component_kwargs, exp_custom_attrs, exp_style):
         exp_custom_attrs: The expected custom attributes.
         exp_style: The expected style.
     """
-    component = rx.box(**component_kwargs)
+    component = SpecialComponent.create(**component_kwargs)
     assert component.custom_attrs == exp_custom_attrs
     assert component.style == exp_style
+    for prop in SpecialComponent.get_props():
+        if prop in component_kwargs:
+            assert getattr(component, prop)._var_value == component_kwargs[prop]