elem:focus not working in nextJS 13.0.3 but not in React-express [5:43pm]

[frankcollins3]

attempting to do: setup component in nextJS the way it was in react-express

error: weird orange border.

clientside function that sets redux state, now there is a jquery based targeting of element and setting of border

const inputfocus = async (event:any) => { 
👍  $(event.target).css('border', '1px dashed #73defe')     // this works but wasn't needed in react-express
        TOGGLE_INPUT_FOCUS( { payload: inputType } ) 
    }

SignupInput.module.scss:

.input {
    border: transparent;
    // height: 2em;
    // border: 5px solid blue;
}

.input:focus {
👎     border: 1px dashed #73defe;
    font-weight: bolder;
}

part of this problem is that, after focusing on the element, the orange border comes up. Then, when we click away from the element, the orange border goes away and the: border gets set $(event.target).css('border', '1px dashed #73defe')

[5:43pm]

[frankcollins3]

proposed approach: might check with globals.css and see if that works.

[frankcollins3]

.input:focus { outline: none !important ; // which wasn't needed in react-express border: 1px dashed #73defe !important; font-weight: bolder; }

// bookmark. kind of funny it's an orange border. I often test with random colored borders. I was digging all over the app looking for a setting somehow of an orange border

especially since in the react-express version i had some entanglement between different components and fixed that mess of CSS files, elements, classes clashing by being more specific with ID and CLASS

[5:52pm]