Shift -> LeftArrow Handler [12:53pm]

[frankcollins3]

attempting to do: make a handler that allows for intuitive use of spanning-highlight over all letters of the input.

    const fakeChanger = (event:any) => {
        let key:string = event.key
        let value:string = event.target.value
        const valueLength:number = inputVal.length        
        console.log('key')
        console.log(key)
        const clickCondition = key === 'Tab' || key === 'Meta' || key === 'Control' || key === 'Shift' || key === 'Alt' || key ===  'Option' || key === 'Enter' || key === 'ArrowRight'
        if (clickCondition) {
            console.log('Meta or friends')
            return
        }
👎         if (key === "ArrowLeft") { setInputVal("")}
         else { key === "Backspace" ? setInputVal(`${inputVal.slice(0, -1)}`) : setInputVal(`${inputVal}${key}`) }
    }

error: 👎 if (key === "ArrowLeft") { setInputVal("")} clearing the inputVal (input value={prop}) means that: 👎 You cant use LeftArrow just to go back

proposed approach: create state that tracks the last entered character into the input, and if lastChar === "shift" next Char === "LeftArrow" clearVal this means the user/human cant just use shift to highlight 1 letter, but they can use LeftArrow to go back w/o clearing value

[frankcollins3]

const fakeChanger = (event:any) => { 👎 setLastChar(value) // just getting to trying this. this won't work because it'll change before value considered let key:string = event.key let value:string = event.target.value const valueLength:number = inputVal.length
console.log('key') console.log(key) const clickCondition = key === 'Tab' || key === 'Meta' || key === 'Control' || key === 'Shift' || key === 'Alt' || key === 'Option' || key === 'Enter' || key === 'ArrowRight' if (clickCondition) { console.log('Meta or friends') return } if (lastChar === "Shift" && key === "ArrowLeft") { setInputVal("")} else { key === "Backspace" ? setInputVal(${inputVal.slice(0, -1)}) : setInputVal(${inputVal}${key}) } }

[12:55pm]

[frankcollins3]

if (clickCondition) {
console.log('Meta or friends')
👎 return
}

👎 return statement causing clog has to let the function run through

approach: 👎 get rid of that if block. 👎 the rid of return. 👍 state of lastChar into that if block because the state doesn't have to be set for any other character besides "Shift"

[1:00pm]

[frankcollins3]

👍 setLastChar(key) [1:02pm]

[frankcollins3]

that works now