fix(tasty): optiimize style rendering * 2

Author: tenphi

src/components/fields/ComboBox/ComboBox.test.tsx

@@ -189,7 +189,7 @@ describe('<ComboBox />', () => {
     });
   });
 
-  it.skip('should manage selection correctly', async () => {
+  it('should manage selection correctly', async () => {
     const onSelectionChange = jest.fn();
 
     const { getByRole, getAllByRole, queryByRole } = renderWithRoot(

src/tasty/tasty.tsx

@@ -353,8 +353,10 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
 
       for (const prop of propsToCheck) {
         const key = prop as unknown as string;
-        if (Object.prototype.hasOwnProperty.call(otherProps as object, key)) {
-          if (!propStyles) propStyles = {};
+
+        if (!propStyles) propStyles = {};
+
+        if (key in otherProps) {
           (propStyles as any)[key] = (otherProps as any)[key];
           delete (otherProps as any)[key];
         }
@@ -376,6 +378,8 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
         [breakpoints?.join(',')],
       );
 
+      const propStylesKey = stringifyStyles(propStyles);
+
       // Optimize style computation and cache key generation
       const { allStyles, cacheKey, useDefaultStyles } = useMemo(() => {
         const hasStyles =
@@ -399,7 +403,7 @@ function tastyElement<K extends StyleList, V extends VariantMap>(
           cacheKey: key,
           useDefaultStyles: useDefault,
         };
-      }, [styles, propStyles, breakpointsKey]);
+      }, [styles, propStylesKey, breakpointsKey]);
 
       // Compute rules synchronously; inject via insertion effect
       const directResult: RenderResult = useMemo(() => {