Can't type in input text when input color picker is showing up

I'm trying to open the picker the same time someone types something on the textbox. But what happens is when it opens, I can't type on the textbox. Is this the right way to do it? Or is there a better approach?

function openPicker(e) {    e.nextElementSibling.click();  }

.color-picker-container {      cursor: pointer;      background-color: transparent;      flex-grow: 1;      border-radius: 5px;      max-height: 15px;      padding: 5px;      position: relative;      width: 200px;      display: flex;      align-items: center;      justify-content: center;  }    .color-picker-text-field {      background-color: #fff;      border-top-right-radius: 0px;      border-bottom-right-radius: 0px;      color: #4e4e4e;      max-height: 15px;      padding: 4px;      font-size: 12px;      min-width: 0px;      margin: 0px !important;      border: inherit !important;      box-shadow: 0 0 10px #dadada;      width: 50%;  }    .color-picker-field {      margin: 0px;      border-top-left-radius: 0px;      border-bottom-left-radius: 0px;      max-height: 15px;      -webkit-appearance: none;      border: none;      cursor: pointer;      padding: 0px;      width: 50px;      border-left: solid 3px #f0ecf3;  }

<div class="color-picker-container " style="">        <input type="text" class="color-picker-text-field" value="#ffffff" onclick="openPicker(this);">        <input class="color-picker-field primary-color-picker" type="color" value="#ffffff">  </div>

https://stackoverflow.com/questions/66863867/cant-type-in-input-text-when-input-color-picker-is-showing-up March 30, 2021 at 10:06AM