Rework combobox.jsx to functional component

client/components/combobox.jsx

@@ -1,128 +1,166 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
 require('./combobox.less');
+import React, { useState, useRef, useEffect } from 'react';
+const _ = require('lodash');
 
-const Combobox = createClass({
-	displayName     : 'Combobox',
-	getDefaultProps : function() {
-		return {
-			className   : '',
-			trigger     : 'hover',
-			default     : '',
-			placeholder : '',
-			autoSuggest : {
-				clearAutoSuggestOnClick : true,
-				suggestMethod           : 'includes',
-				filterOn                : []  // should allow as array to filter on multiple attributes, or even custom filter
-			},
-		};
-	},
-	getInitialState : function() {
-		return {
-			showDropdown : false,
-			value        : '',
-			options      : [...this.props.options],
-			inputFocused : false
+const Combobox = ({ onSelect, onEntry, autoSuggest = { filterOn: ['data-value'], suggestMethod: 'includes', clearAutoSuggestOnClick: false }, ...props })=>{
+	const [inputValue, setInputValue] = useState(props.value || '');
+	const [showDropdown, setShowDropdown] = useState(false);
+	const [inputFocused, setInputFocused] = useState(false);
+	const [currentOption, setCurrentOption] = useState(-1);
+	const [filteredOptions, setFilteredOptions] = useState(React.Children.toArray(props.children));
+	const inputRef = useRef(null);
+	const optionRefs = useRef([]);
+	const componentRef = useRef(null);
+
+	useEffect(()=>{
+		const handleClickOutside = (evt)=>{
+			if(showDropdown && componentRef.current && !componentRef.current.contains(evt.target)) {
+				setShowDropdown(false);
+			}
 		};
-	},
-	componentDidMount : function() {
-		if(this.props.trigger == 'click')
-			document.addEventListener('click', this.handleClickOutside);
-		this.setState({
-			value : this.props.default
-		});
-	},
-	componentWillUnmount : function() {
-		if(this.props.trigger == 'click')
-			document.removeEventListener('click', this.handleClickOutside);
-	},
-	handleClickOutside : function(e){
-		// Close dropdown when clicked outside
-		if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
-			this.handleDropdown(false);
+
+		document.addEventListener('pointerdown', handleClickOutside);
+		return ()=>{document.removeEventListener('pointerdown', handleClickOutside);};
+	}, [showDropdown]);
+
+	useEffect(()=>{
+		onSelect(inputValue);
+		// handleInputChange({ target: { value: inputValue } });
+	}, [inputValue]);
+
+	useEffect(()=>{
+		if(currentOption >= 0 && optionRefs.current[currentOption]) {
+			optionRefs.current[currentOption].focus();
 		}
-	},
-	handleDropdown : function(show){
-		this.setState({
-			showDropdown : show,
-			inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
-		});
-	},
-	handleInput : function(e){
-		e.persist();
-		this.setState({
-			value        : e.target.value,
-			inputFocused : false
-		}, ()=>{
-			this.props.onEntry(e);
+	}, [currentOption]);
+
+	const handleInputChange = (evt)=>{
+		const newValue = evt.target.value;
+		setInputValue(newValue);
+		setCurrentOption(-1);
+
+		const filtered = React.Children.toArray(props.children).filter((option)=>{
+			return autoSuggest.filterOn.some((filterAttr)=>{
+				return option.props[filterAttr]?.toLowerCase().startsWith(newValue.toLowerCase());
+			});
 		});
-	},
-	handleSelect : function(e){
-		this.setState({
-			value : e.currentTarget.getAttribute('data-value')
-		}, ()=>{this.props.onSelect(this.state.value);});
-		;
-	},
-	renderTextInput : function(){
-		return (
-			<div className='dropdown-input item'
-				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}>
-				<input
-					type='text'
-					onChange={(e)=>this.handleInput(e)}
-					value={this.state.value || ''}
-					placeholder={this.props.placeholder}
-					onBlur={(e)=>{
-						if(!e.target.checkValidity()){
-							this.setState({
-								value : this.props.default
-							}, ()=>this.props.onEntry(e));
-						}
-					}}
-				/>
-			</div>
-		);
-	},
-	renderDropdown : function(dropdownChildren){
-		if(!this.state.showDropdown) return null;
-		if(this.props.autoSuggest && !this.state.inputFocused){
-			const suggestMethod = this.props.autoSuggest.suggestMethod;
-			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
-			const filteredArrays = filterOn.map((attr)=>{
-				const children = dropdownChildren.filter((item)=>{
-					if(suggestMethod === 'includes'){
-						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					} else if(suggestMethod === 'startsWith'){
-						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
-					}
+		setFilteredOptions(filtered);
+	};
+
+	/* eslint-disable brace-style */
+
+	// Handle keyboard navigation
+	const handleKeyDown = (evt)=>{
+		const modifiers = ['Meta', 'Shift', 'Alt', 'Control', 'Tab'];
+		if(inputFocused || (currentOption >= 0)) {
+			const optionsLength = filteredOptions.length;
+
+			if((evt.key === ' ') && (inputValue === '')){
+				evt.preventDefault();
+				setShowDropdown(!showDropdown);
+			}
+
+			// ArrowDown moves to the next option
+			else if(evt.key === 'ArrowDown') {
+				evt.preventDefault();
+				if((currentOption === -1) && (showDropdown === false)){
+					setShowDropdown(true);
+				};
+				const nextIndex = currentOption + 1;
+				if(nextIndex < optionsLength) {
+					setCurrentOption(nextIndex);
+				} else {
+					setCurrentOption(0);
+				}
+			}
+
+			// ArrowUp moves to the previous option
+			else if(evt.key === 'ArrowUp') {
+				evt.preventDefault();
+				const prevIndex = currentOption - 1;
+				if(prevIndex >= 0) {
+					setCurrentOption(prevIndex);
+				} else {
+					setCurrentOption(-1);
+					inputRef.current.focus();
+				}
+			}
+
+			// Escape key closes the dropdown
+			else if(evt.key === 'Escape'){
+				setCurrentOption(-1);
+				inputRef.current.focus();
+				setShowDropdown(false);
+			}
+
+			// Backspace key while menu is open still deletes characters in input
+			else if((evt.key === 'Backspace') && showDropdown){
+				inputRef.current.focus();
+			}
+
+			else if((evt.key === 'Tab')){
+				setCurrentOption(-1);
+				setShowDropdown(false);
+			}
+
+			// Prevent modifier keys from triggering dropdown (example, shift+tab or tab to move focus)
+			else if(!modifiers.includes(evt.key)) {
+				setShowDropdown(true);
+			}
+		}
+
+
+	};
+	/* eslint-enable brace-style */
+
+	const handleOptionClick = (evt)=>{
+		setInputValue(evt.currentTarget.dataset.value);
+	};
+
+	// Render the filtered options
+	const renderChildren = ()=>{
+		optionRefs.current = []; // Reset refs for each render cycle
+
+		if(filteredOptions.length < 1){
+			return <span className='no-matches'>no matches</span>;
+		} else {
+			// Add refs and event handlers for filtered options
+			return filteredOptions.map((child, i)=>{
+				return React.cloneElement(child, {
+					onClick   : (evt)=>handleOptionClick(evt),
+					onKeyDown : (evt)=>handleKeyDown(evt),
+					ref       : (node)=>{ optionRefs.current[i] = node; },
+					tabIndex  : -1,
 				});
-				return children;
 			});
-			dropdownChildren = _.uniq(filteredArrays.flat(1));
+
 		}
+	};
 
-		return (
-			<div className='dropdown-options'>
-				{dropdownChildren}
-			</div>
-		);
-	},
-	render : function () {
-		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
-			return clone;
-		});
-		return (
-			<div className={`dropdown-container ${this.props.className}`}
-				ref='dropdown'
-				onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
-				{this.renderTextInput()}
-				{this.renderDropdown(dropdownChildren)}
+	return (
+		<div className='combobox' ref={componentRef}>
+			<input
+				type='text'
+				ref={inputRef}
+				value={inputValue}
+				placeholder={props.placeholder}
+				onClick={()=>{
+					setShowDropdown(true);
+					setInputFocused(true);
+					autoSuggest.clearAutoSuggestOnClick && setInputValue('');
+				}}
+				onChange={(evt)=>handleInputChange(evt)}
+				onKeyDown={(evt)=>handleKeyDown(evt)}
+				onFocus={()=>{setInputFocused(true);}}
+				onBlur={()=>{
+					setInputFocused(false);
+				}}
+			/>
+			<div className={`dropdown-options${showDropdown ? ' open' : ''}`}>
+				{renderChildren()}
 			</div>
-		);
-	}
-});
+		</div>
+	);
+};
 
 module.exports = Combobox;

client/components/combobox.less

@@ -1,16 +1,20 @@
-.dropdown-container {
-    position:relative;
-    input {
-        width: 100%;
-    }
-    .dropdown-options {
-        position:absolute;
+.combobox {
+	position: relative;
+	width: max(200px, fit-content);
+	input { 
+		display: block;
+		width: 100%;
+	}
+	.dropdown-options {
+		display: none;
+		position:absolute;
         background-color: white;
-        z-index: 100;
+        z-index: 1000;
         width: 100%;
         border: 1px solid gray;
         overflow-y: auto;
         max-height: 200px;
+		padding: 3px;
 
         &::-webkit-scrollbar {
           width: 14px;
@@ -23,16 +27,26 @@
           border-radius: 10px;
           border: 3px solid #ffffff;
         }
-
-        .item {
-            position:relative;
+		&.open {
+			display: unset;
+		}
+		> * {
+			all: unset;
+			display: block;
+			width: 100%;
+			position:relative;
             font-size: 11px;
             font-family: Open Sans;
             padding: 5px;
             cursor: default;
             margin: 0 3px;
+			box-sizing: border-box;
+			margin: 0;
             //border-bottom: 1px solid darkgray;
             &:hover {
+                background-color: rgb(223, 221, 221);
+			}
+			&:focus {
                 filter: brightness(120%);
                 background-color: rgb(163, 163, 163);
             }
@@ -43,8 +57,13 @@
                 font-style:italic;
                 font-size: 9px;
             }
-        }
-
-    }
-
-}
+			&.no-matches {
+				width:100%;
+                text-align: center;
+                color: rgb(124, 124, 124);
+                font-style:italic;
+                font-size: 9px;
+			}
+		}
+	}
+}