@bunnix/components 0.11.1 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnix/components",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
   "keywords": [
     "bunnix",

package/src/core/inputs.mjs

@@ -149,6 +149,7 @@ function getTextAreaVerticalInset(node) {
 function resizeTextArea(node, minLines, maxLines) {
   if (!node) return;
 
+  node.style.height = "auto";
   const metrics = getTextAreaHeightMetrics({
     lineHeight: getLineHeightPx(node),
     scrollHeight: node.scrollHeight,
@@ -157,7 +158,6 @@ function resizeTextArea(node, minLines, maxLines) {
     verticalInset: getTextAreaVerticalInset(node),
   });
 
-  node.style.height = "auto";
   node.style.height = `${metrics.nextHeight}px`;
   node.style.overflowY = metrics.shouldScroll ? "auto" : "hidden";
 }
@@ -352,13 +352,20 @@ const PickerCore = (props, _) => {
       };
     });
 
-    return { selectedItem, firstSelectableOption, menuOptions, isDisabled: !!isDisabled };
+    return {
+      selectedItem,
+      firstSelectableOption,
+      displayItem: selectedItem ?? firstSelectableOption ?? null,
+      menuOptions,
+      isDisabled: !!isDisabled,
+    };
   });
 
   useEffect(({ selectedItem, firstSelectableOption }) => {
     const selectedKey = value.get();
-    if (!selectedKey || selectedItem) return;
+    if (selectedItem) return;
     if (!firstSelectableOption) {
+      if (!selectedKey) return;
       value.set("");
       props.input &&
         props.input({
@@ -392,7 +399,7 @@ const PickerCore = (props, _) => {
     labelProps,
     div(
       {},
-      Show(pickerState, ({ selectedItem, menuOptions, isDisabled }) =>
+      Show(pickerState, ({ displayItem, menuOptions, isDisabled }) =>
         withExtractedStyles((finalTriggerProps) =>
           Menu({
             ...(anchor ? { anchor } : {}),
@@ -417,23 +424,23 @@ const PickerCore = (props, _) => {
                   { fillWidth: true, alignItems: "center", gap: "small" },
                   div(
                     { class: "picker-selection" },
-                    ...(selectedItem?.icon
+                    ...(displayItem?.icon
                       ? [
                           Icon({
-                            name: selectedItem.icon,
+                            name: displayItem.icon,
                             size: 16,
                             ...(triggerColor ? { color: triggerColor } : {}),
                           }),
                         ]
                       : []),
-                    ...(selectedItem
+                    ...(displayItem
                       ? [
                           Text(
                             {
                               weight: "heavy",
                               ...(triggerColor ? { color: triggerColor } : {}),
                             },
-                            selectedItem.text ?? selectedItem.key,
+                            displayItem.text ?? displayItem.key,
                           ),
                         ]
                       : []),