@tastic/profile 0.3.4 → 0.3.5

package/dist/index.js

@@ -390,8 +390,15 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
+  const tagFocusRef = (0, import_react2.useRef)(tag.props.focus);
+  (0, import_react2.useEffect)(() => {
+    tagFocusRef.current = tag.props.focus;
+  });
+  (0, import_react2.useEffect)(() => {
+    if (host.openId === "color") tagFocusRef.current();
+  }, [host.openId]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })

package/dist/index.mjs

@@ -362,8 +362,15 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   const register = useFocusChain();
   const tag = register();
   const name = register();
+  const tagFocusRef = useRef(tag.props.focus);
+  useEffect(() => {
+    tagFocusRef.current = tag.props.focus;
+  });
+  useEffect(() => {
+    if (host.openId === "color") tagFocusRef.current();
+  }, [host.openId]);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark }),
+    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
     /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
     /* @__PURE__ */ jsx3(TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Player profile identity for local-multiplayer React Native games — a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",

package/src/ProfilesManager.tsx

@@ -272,10 +272,11 @@ interface EditRowProps {
 
 // One row, expanded: the color trigger (@tastic/hud's InlineColorPicker), a tag field clamped to
 // CHIP_SIZE, the name taking up whatever's
-// left, and — only for an existing profile — a delete icon at the very end. No `tag` passed to the
-// color trigger here — it keeps its plain palette icon regardless of the row's own tag field, since
-// the tag is already right next to it in its own field, so repeating it on the color trigger too
-// would be redundant rather than informative.
+// left, and — only for an existing profile — a delete icon at the very end. `tag={draftTag}` IS
+// passed to the color trigger here (unlike a plain identity badge elsewhere) so it shows the same
+// live draft value the tag field itself does — the two effects below are what wires tapping the
+// swatch to popping the keyboard on the tag field too, so typing a tag and picking a color read as
+// one combined action instead of two separate taps.
 // Return-key chains tag -> name via @rific/focus-chain rather than each field submitting on its
 // own — submitting the *name* field is what actually commits the row, so its registration's own
 // onSubmitEditing (a no-op — it's last in the chain) is overridden with onSubmit below, matching
@@ -285,9 +286,29 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   const tag = register()
   const name = register()
 
+  // tag.props.focus (from @rific/focus-chain's own register(), not tag.ref — that's a callback
+  // ref, not a ref object, so it has no .current to read) is the hook's own imperative "focus this
+  // exact registered field" call. Mirrored into a ref every render, same as commitEditRef above,
+  // rather than read directly in the effect below: register() returns a brand-new props object on
+  // every render (it isn't memoized), so depending on tag.props.focus directly would rerun that
+  // effect — and refocus an already-focused field — on every keystroke into the tag field itself,
+  // re-triggering its own selectTextOnFocus mid-type and wiping out what's being typed.
+  const tagFocusRef = useRef(tag.props.focus)
+  useEffect(() => {
+    tagFocusRef.current = tag.props.focus
+  })
+
+  // Lets tapping the swatch itself hand focus straight to the tag field, so one tap both opens the
+  // color popover (host.toggle, inside InlineColorPicker's own onPress) and pops the keyboard on
+  // the tag field right next to it. Scoped to host.openId so this only fires on an actual open
+  // transition, not on every re-render while it's already open.
+  useEffect(() => {
+    if (host.openId === 'color') tagFocusRef.current()
+  }, [host.openId])
+
   return (
     <View style={styles.editRow}>
-      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} dark={dark} />
+      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} tag={draftTag} dark={dark} />
       {/* selectTextOnFocus so tapping into an already-set tag selects it for wholesale replacement
       — the far more common edit than inserting into the middle of a 1-3 character value. */}
       {/* eslint-disable-next-line react-hooks/refs -- tag.ref/tag.props come from useFocusChain's