Zwel Posts - Answer Overflow

Zwel

•Created by Zwel on 2/5/2025 in #support

Range input issue with Dynamic component

Range slider input can't slide on Android devices. Please kindly check below sandbox demo. https://codesandbox.io/p/devbox/694lr9

2 replies

SSolidJS

•Created by Zwel on 5/28/2024 in #support

Adding new element to an array before the last element inside solid store

const [tabStore, setTabStore] = createStore<{ contents: TabContent[] }>({
  contents: [
    {
      id: 'original',
      button: (
        <>
          Original <Icon namespace="Globe" {...iconProps} />
        </>
      )
    },
    {
      id: 'new',
      button: (
        <>
          <Icon namespace="Add" {...iconProps} /> New Effect
        </>
      )
    }
  ]
})


  const addNewTab = (newTab: TabContent) => {
    setTabStore('contents', tabs => [
      ...tabs.slice(0, tabs.length - 1),
      newTab,
      tabs[tabs.length - 1]
    ])
  }

const [tabStore, setTabStore] = createStore<{ contents: TabContent[] }>({
  contents: [
    {
      id: 'original',
      button: (
        <>
          Original <Icon namespace="Globe" {...iconProps} />
        </>
      )
    },
    {
      id: 'new',
      button: (
        <>
          <Icon namespace="Add" {...iconProps} /> New Effect
        </>
      )
    }
  ]
})


  const addNewTab = (newTab: TabContent) => {
    setTabStore('contents', tabs => [
      ...tabs.slice(0, tabs.length - 1),
      newTab,
      tabs[tabs.length - 1]
    ])
  }

Is there other way to update like this. I am thinking of if I can add new element using index like splice(index, 1, newElement) inside solidStore. I am also trying "path update", but it doesn't match my scenario. Thanks for your help!

2 replies

SSolidJS

•Created by Zwel on 5/4/2024 in #support

html range input doesn't work correctly inside <Dynamic> on android devices

**work on all devices**
<Dynamic component="div">
  <input type="range" />
</Dynamic>

doesn't work on android devices
<div>
  <Dynamic component="div">
    <input type="range" />
  </Dynamic>
</div>

**work on all devices**
<Dynamic component="div">
  <input type="range" />
</Dynamic>

doesn't work on android devices
<div>
  <Dynamic component="div">
    <input type="range" />
  </Dynamic>
</div>

When it has been wrapped by another div, input can't slide.

1 replies

SSolidJS

•Created by Zwel on 4/4/2024 in #support

Range input doesn't work correctly with props value

3 replies

SSolidJS

•Created by Zwel on 3/7/2024 in #support

Solid doesn't re-render when update the same array in createSignal

Expected behavior: Re-render inputs every time passwords array is updated even with the same value, to avoid duplicating value in the same input.

import { Component, For, createSignal } from 'solid-js'

const App: Component = () => {
  const [passwords, setPasswords] = createSignal(['', '', ''])

  const setPassword = (v: string, index: number) => {
    const value = v.split('').reverse()[0]

    setPasswords(old =>
      old.map((oldValue, currentIdx) => {
        if (currentIdx === index) return value

        return oldValue
      })
    )
  }

  return (
    <For each={passwords()}>
      {(v, idx) => {
        console.log('render the inputs')

        return (
          <input
            type="number"
            min="0"
            max="9"
            step="1"
            maxLength="1"
            value={v}
            onInput={e => setPassword(e.target.value, idx())}
          />
        )
      }}
    </For>
  )
}

export default App

import { Component, For, createSignal } from 'solid-js'

const App: Component = () => {
  const [passwords, setPasswords] = createSignal(['', '', ''])

  const setPassword = (v: string, index: number) => {
    const value = v.split('').reverse()[0]

    setPasswords(old =>
      old.map((oldValue, currentIdx) => {
        if (currentIdx === index) return value

        return oldValue
      })
    )
  }

  return (
    <For each={passwords()}>
      {(v, idx) => {
        console.log('render the inputs')

        return (
          <input
            type="number"
            min="0"
            max="9"
            step="1"
            maxLength="1"
            value={v}
            onInput={e => setPassword(e.target.value, idx())}
          />
        )
      }}
    </For>
  )
}

export default App

10 replies

Gaming

Programming