Real Atlassian Interview Experience

s = "abcabcbb"

Step 1: window = "a", max = 1
Step 2: window = "ab", max = 2
Step 3: window = "abc", max = 3
Step 4: See 'a' again (duplicate!)
        Shrink from left: remove 'a'
        window = "bca", max = 3
Step 5: Shrink: remove 'b'
        window = "cab"
Step 6: Shrink: remove 'c'
        window = "ab"
Step 7: Add 'b', window = "abb"
        Shrink: remove first 'b'
        window = "bb"
        Shrink: remove 'b'
        window = "b", max = 3

function lengthOfLongestSubstring(s) {
  const charMap = new Map();
  let maxLen = 0;
  let left = 0;

  for (let right = 0; right < s.length; right++) {
    const char = s[right];
    
    if (charMap.has(char)) {
      left = Math.max(left, charMap.get(char) + 1);
    }
    
    charMap.set(char, right);
    maxLen = Math.max(maxLen, right - left + 1);
  }
  
  return maxLen;
}

// Test: lengthOfLongestSubstring("abcabcbb") → 3

import React, { useState, useRef, useEffect } from 'react';

function CustomSelect({ options, onSelect, placeholder }) {
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [highlightedIndex, setHighlightedIndex] = useState(0);
  const [selectedValue, setSelectedValue] = useState(null);
  const selectRef = useRef(null);
  const dropdownRef = useRef(null);

  // Filter options based on search term
  const filteredOptions = options.filter(opt =>
    opt.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // Handle keyboard navigation
  const handleKeyDown = (e) => {
    if (!isOpen && e.key !== 'Enter') return;

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setHighlightedIndex(prev =>
          Math.min(prev + 1, filteredOptions.length - 1)
        );
        if (!isOpen) setIsOpen(true);
        break;
      
      case 'ArrowUp':
        e.preventDefault();
        setHighlightedIndex(prev => Math.max(prev - 1, 0));
        break;
      
      case 'Enter':
        e.preventDefault();
        if (filteredOptions[highlightedIndex]) {
          handleSelect(filteredOptions[highlightedIndex]);
        } else if (!isOpen && options.length > 0) {
          setIsOpen(true);
        }
        break;
      
      case 'Escape':
        setIsOpen(false);
        setSearchTerm('');
        break;
      
      default:
        break;
    }
  };

  // Handle option selection
  const handleSelect = (option) => {
    setSelectedValue(option);
    setIsOpen(false);
    setSearchTerm('');
    setHighlightedIndex(0);
    onSelect?.(option);
  };

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (selectRef.current && !selectRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [isOpen]);

  // Auto-focus search when dropdown opens
  useEffect(() => {
    if (isOpen && dropdownRef.current) {
      dropdownRef.current.focus();
    }
  }, [isOpen]);

  return (
    <div ref={selectRef} className="select-wrapper">
      {/* Trigger Button */}
      <button
        className="select-trigger"
        onClick={() => setIsOpen(!isOpen)}
        aria-haspopup="listbox"
        aria-expanded={isOpen}
      >
        <span>{selectedValue || placeholder}</span>
        <span className={`arrow ${isOpen ? 'open' : ''}`}>▼</span>
      </button>

      {/* Dropdown Menu */}
      {isOpen && (
        <div className="select-dropdown" role="listbox">
          {/* Search Input */}
          <div className="select-search">
            <input
              ref={dropdownRef}
              type="text"
              placeholder="Search options..."
              value={searchTerm}
              onChange={(e) => {
                setSearchTerm(e.target.value);
                setHighlightedIndex(0);
              }}
              onKeyDown={handleKeyDown}
              aria-label="Search options"
            />
          </div>

          {/* Options List */}
          <ul className="select-options">
            {filteredOptions.length > 0 ? (
              filteredOptions.map((option, idx) => (
                <li
                  key={option}
                  className={`select-item ${
                    idx === highlightedIndex ? 'highlighted' : ''
                  } ${option === selectedValue ? 'selected' : ''}`}
                  onClick={() => handleSelect(option)}
                  onMouseEnter={() => setHighlightedIndex(idx)}
                  role="option"
                  aria-selected={option === selectedValue}
                >
                  {option}
                </li>
              ))
            ) : (
              <li className="select-item" style={{ pointerEvents: 'none' }}>
                No options found
              </li>
            )}
          </ul>
        </div>
      )}
    </div>
  );
}

export default CustomSelect;

• Empty search results - Show "No options found"
• Keyboard boundary - Don't go above 0 or below length-1
• Focus management - Auto-focus search input when opening
• Click outside - Use ref and event listener to detect
• Option not found - Reset search on selection
• Dynamic options - Reset highlighted index when search changes

• ✓ Code structure and readability
• ✓ State management patterns
• ✓ Keyboard navigation completeness
• ✓ Accessibility (WCAG compliance)
• ✓ Edge case handling
• ✓ Performance (filtering efficiency)
• ✓ Communication and explanation