You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import{render,Box,Text,useFocus,useInput,useFocusManager}from"ink";import{useEffect}from"react";exportconstApp=()=>{const{ focus }=useFocusManager();useInput((input)=>{if(input==="1"){focus("1");}if(input==="2"){focus("2");}if(input==="3"){focus("3");}});// Sets default focus on element with id === "1"focus("1");return(<BoxflexDirection="column"padding={1}><BoxmarginBottom={1}><Text>PressTabtofocusnextelement,Shift+Tabtofocuspreviouselement,Esctoresetfocus.</Text></Box><Itemid="1"label="Press 1 to focus"/><Itemid="2"label="Press 2 to focus"/>
<Itemid="3"label="Press 3 to focus"/></Box>);};constItem=({ label, id }: {label: string;id: string})=>{const{ isFocused }=useFocus({ id });return(<Text>{label}{isFocused&&<Textcolor="green">(focused)</Text>}</Text>);};
When running the app it will show the following:
Press Tab to focus next element, Shift+Tab to focus previous element, Esc to reset focus.
Press 1 to focus (focused)
Press 2 to focus
Press 3 to focus
However, it is not possible to change focus now, neither with "tab" nor with the number keys 1,2,3, the focus is actually changed but jumps back directly to the initial component with id === "1".
I have tried to put the call to focus inside the useEffect hook with the exact same results:
useEffect(()=>{focus("1")})
Any ideas, or is this just a bug?
The text was updated successfully, but these errors were encountered:
After some more experiments, it looks as if the component is re-rendered when pressing "tab", so that's why it goes back to the initial focus status, it kind of makes sense, but how to work around this issue?
Consider this code based on the example code https://github.com/vadimdemedes/ink/tree/master/examples/use-focus-with-id:
When running the app it will show the following:
However, it is not possible to change focus now, neither with "tab" nor with the number keys 1,2,3, the focus is actually changed but jumps back directly to the initial component with id === "1".
I have tried to put the call to focus inside the useEffect hook with the exact same results:
Any ideas, or is this just a bug?
The text was updated successfully, but these errors were encountered: