Why autofocus on input element not work with solid second time
I have this code: https://github.com/nikitavoloboev/kuskus
Here I do conditional render of
NewTodo:
https://github.com/nikitavoloboev/kuskus/blob/main/src/pages/Today.tsx#L14
Here is input with autofocus
https://github.com/nikitavoloboev/kuskus/blob/main/src/components/NewTodo.tsx#L37
For some reason when I create a first todo, autofocus works but second time it does not.
Even though solid mounts it twice. onMount runs twice.
What is going wrong? Is there a better way to achieve bringing focus to input box?87 Replies
Cant really explain in too much depth but I just dont think autofocus html attribute works well with non static sites. And different browsers do different things. I suggest getting a ref and focusing in onMount
we have simple
autofocus helper in solid-primitives that helps here
GitHub
solid-primitives/packages/autofocus at main · solidjs-community/sol...
A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/packages/autofocus at main · solidjs-community/solid-primitives
reading docs it seems that this should work 🤔
never used attributes with
: inside
kind of odd looking
or its expected and I should ts-ignore it?
reading through root readme maybe i have to do something to make it work
GitHub
solid-primitives/packages/autofocus at main · solidjs-community/sol...
A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/packages/autofocus at main · solidjs-community/solid-primitives
i think i followed this part correctly
ts tree shakes the directives as they are only strings
So you can use them right after import do that ts won't touch them or use a
ref and the directive as a function.
I guess the docs should mention it. I'll correct it.im bit confused what you mean
i know tree shaking is removing non used code
when making builds
directives i googled now
directives · WebPlatform Docs
The following table lists JavaScript directives. A directive is a token that adds certain syntactic and semantic restrictions.
still confusing
So you can use them right after importi thought im doing this
oh I see so directives are i guess functions for attributes
thats neat
til
lol
actually youre better of not using directives ever xd
why?
too hard?
GitHub
solid-primitives/packages/autofocus at main · solidjs-community/sol...
A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/packages/autofocus at main · solidjs-community/solid-primitives
trying this approach now
with ref i guess
to many quirks
- ts tree shakes them
- the types for them are declared globally, so ts will allow you to use them even if they are not available in the same file
- cannot be used on components
there is probably more if you ask fabio
so createautofocus?
for now
I'll adapt
autofocus to work with ref as wellGitHub
kuskus/NewTodo.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
trying this that fails
im confused where that func should go
maybe onMount or something
docs just seem to imply i can add it anywhere
btw unrelated issue but maybe you know
@solid-primitives/keyboard
for some reason i guess this insane bug
when I try to deletethats pretty much the case
GitHub
kuskus/Page.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
even though I only activate it once 😕
apparently not everywhere
I really never enjoyed the directives thing either, its cool idea but not smooth experience
unless i missed something
i just did this in component
then added ref to the input
normally i do
ref={ref=>setRef(ref)}
here seems you're setting accessor to ref value
doesnt like that
guess due to naming
will try change
const [ref, setRef] = createSignal<HTMLButtonElement>()
or rather its due to type
fk
my bad 😄
const [ref, setRef] = createSignal<HTMLInputElement>()
ok autofocus works
but this bug is so strange, delete just does this insane cascade thing
youre subscribing to
todos()oh in effect
my mental model of effects was that whatever signal gets used inside effect gets subscribed to
i guess thats what you mean
opened another issue for the effect
but for this ref issue, there is another issue where it does auto focus on creating first
NewTodo
but when you create second one it doesn't autofocus to it
this is strange because I would think the ref would be different
i.e. here is where NewTodo gets rendered
when return is pressed setNewTodo is set to false
so when it gets set to true again that should be new component
I would think
but @solid-primitives/autofocus does not like it 😦
oh and i tried to do it as they do in docs
GitHub
solid-primitives/packages/autofocus at main · solidjs-community/sol...
A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/packages/autofocus at main · solidjs-community/solid-primitives
well i guess i have signal in my case
so it works initially, but not when the target is updated?
I'll need to do some experiments here.
yes
you can clone my repo
to replicate
GitHub
GitHub - nikitavoloboev/kuskus: Fast todo app
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
it adds the entry but doesn't autofocus
first one is ok
could be I am using it wrong
Seems to be working fine: https://stackblitz.com/edit/solid-primitives-autofocus?file=src%2FApp.tsx
strange error
I did as they have in example
i think
GitHub
kuskus/NewTodo.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
although in my case i don't know where to put
setRef
i have just one input
in example there is 2 inputs
also have type error
which is odd as i also have input
and stackblitz is
input
🤔I've made an update to allow it to be used with
ref easier, so you might update
doesn't work still
but no error
2nd time it doesn't focus
@thetarnav do you have an idea of why my code breaks? I read through the stackblitz you shared
it seems to be very much the same
only in my case I actually create new inputs
it seems the issue is that the component doesn't get unmounted or something, its confusing
new inputs are created in the demo too
so I'm not sure
wait
i think i need to pass setRef
perhaps
like in my case its not used
GitHub
kuskus/NewTodo.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
the demo shows two different methods, you can use either
oh so im using the 2nd one
i think correctly
well exactly as in demo
but for me it only works on first time
yeah I'm not sure
I have to be missing something
el && setTimeout(() => el.focus());
this line is not too clear for me
like it sets focus insantly it seems
is there perhaps another way to set focus on components in solid?
going to try 1st method
although that one failed too i remember.focus is a browser api
I would just try using it directly and see when it works and when it doesn't
like, reverse engineering the directive
I have a feeling this is breaking it
like it doesn't like this Show
I am not using the directive I think
it seems to me like the solid component never dissapears although it should
i checked with
onMount
it gets called twice
so i'd think the .focus() would work second time too
trying this now
ah its a function ok still fails
yea it doesn't like this too
doesn't even work on first time
is the
dev folder like an example for autofocus
in solid-primitives
as it looks diff to stackblitz you shared
createAutofocus(() => ref); // Or using a signal accessor.
another thing is here in exampleor wait nvm thats fine
yea i don't even know where to start debugging
i tried to do raw
.focus()
it didn't even work onMounttry
ref={el => onMount(() => setTimeout(() => el.focus(),200))}
didn't work 😦
GitHub
kuskus/NewTodo.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
did it like this
maybe you meant it differently
I have the wildest thing
GitHub
kuskus/Page.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
this works
but if I activate from button it doesn't trigger on second time 🤔
its so weird
something about pressing the button
GitHub
kuskus/ActionBar.tsx at main · nikitavoloboev/kuskus
Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.
button onClick does same thing though
tried this too
its really strange, like with hotkey and button I do same thing
set the signal state
only from hotkey it works amazingly well but from button it fails on 2nd activation
GitHub
autofocus: Does not work on component 2nd time even when using API ...
Using latest version of @solid-primitives/autofocus. I am trying to use it in this project. In theory I am doing exactly the same thing as the docs say. Here is the component. Ref and createAutofoc...
ok opened an issue, maybe someone knows
I've added these console logs to
NewTodo:
it appears that on the second time you create a new todo it's getting disposed immediately, even though it stays on screen
so autofocus doesn't fork because it happens in onMount which never runs
But this only happens after clicking the plus button.
Pressing
n works fineGitHub
Fix autofocus and keyboard shortcuts by thetarnav · Pull Request #1...
I think that the createEffect in src/components/NewTodo.tsx was causing some state change right after mount, causing the component to be disposed of immediately. don't know why exactly, the sta...