fix ui update autoselect, allow to select inputted value (#2011)

also fix for inputs inside player

frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js

@@ -57,6 +57,12 @@ function UserCard({ className, request, session, width, height, similarSessions,
     React.useEffect(() => {
       const handler = (e) => {
         if (e.shiftKey) {
+          if (
+            e.target instanceof HTMLInputElement ||
+            e.target instanceof HTMLTextAreaElement
+          ) {
+            return false;
+          }
           e.preventDefault()
           if (e.key === 'I') {
             setShowMore(!showMore)

frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx

@@ -199,7 +199,6 @@ function CreateNote({
           value={text}
           autoFocus
           onChange={(e) => {
-            console.log(e, e.target.value)
             setText(e.target.value)}
           }
           className="text-area"

frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx

@@ -8,7 +8,7 @@ function AutoplayToggle() {
   const { autoplay } = store.get()
 
   return (
-      <Switch onChange={() => player.toggleAutoplay()} checked={autoplay} checkedChildren="Auto" />
+      <Switch onChange={() => player.toggleAutoplay()} checked={autoplay} unCheckedChildren="Auto" checkedChildren="Auto" />
   );
 }
 

frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx

@@ -12,6 +12,8 @@ const dropdownStyles = {
     option: (provided: any, state: any) => ({
         ...provided,
         whiteSpace: 'nowrap',
+        width: '100%',
+        minWidth: 150,
         transition: 'all 0.3s',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -197,6 +199,8 @@ function FilterAutoComplete(props: Props) {
 
     const selected = value ? options.find((i: any) => i.value === query) : null;
 
+    const uniqueOptions = options.filter((i: Record<string, string>) => i.value !== query)
+    const selectOptionsArr = query.length ? [{ value: query, label: query }, ...uniqueOptions] : options;
     return (
         <div className="relative flex items-center">
             <div className={cn(stl.wrapper, 'relative')}>
@@ -224,12 +228,11 @@ function FilterAutoComplete(props: Props) {
                     ref={(ref: any) => {
                         selectRef = ref;
                     }}
-                    options={options}
+                    options={selectOptionsArr}
                     value={selected}
                     onChange={(e: any) => onChange(e.value)}
-                    menuIsOpen={initialFocus && menuIsOpen}
+                    menuIsOpen={initialFocus && menuIsOpen && query !== ''}
                     menuPlacement="auto"
-                    noOptionsMessage={() => loading ? 'Loading...' : 'No results found'}
                     styles={dropdownStyles}
                     components={{
                         Control: ({ children, ...props }: any) => <></>,