eabald

import React, { useState, useEffect, useCallback } from 'react';
import { FieldProps } from '@keystone-6/core/types';
import { FieldContainer, FieldLabel, TextInput } from '@keystone-ui/fields';

eabald

import {
  controller as StandardController,
  Cell as StandardCell,
  CardValue as StandardCardValue,
} from '@keystone-6/core/fields/types/text/views';

export const Cell = StandardCell;
export const CardValue = StandardCardValue;
export const controller = StandardController;

eabald

export default withAuth(
  config({
    // rest of the config
    server: {
      extendExpressApp: (app) => {
        app.get('/autocomplete/:index', async (req, res) => {
          const suggestions = await autocomplete(
            req.query.q as string,
            req.params.index,
            req.params.index

eabald

const setOnChange = (value: string) => {
  if (props.onChange) {
    props.onChange({
      ...props.value,
      inner: { kind: 'value', value },
    });
  }
}

const onChange = async (event: React.ChangeEvent<HTMLInputElement>) => {

eabald

const getSuggestions = async (query: string) => {
  const res = await fetch(`/autocomplete/${props.field.path}?q=${query}`);
  const json = await res.json();
  return await json.hits;
};

eabald

const initialGetSuggestions = useCallback(async () => {
  if (props.value.inner.kind === 'value' && props.value.inner.value) {
    const currentSuggestions = await getSuggestions(props.value.inner.value);
    setSuggestions(currentSuggestions);
    setTimeout(() => setVisible(false), 300);
  }
}, []);

useEffect(() => {
  initialGetSuggestions();

eabald

return (
  <FieldContainer>
    <FieldLabel htmlFor={props.field.path}>{props.field.label}</FieldLabel>
    <TextInput
      autoComplete="off"
      id={props.field.path}
      autoFocus={props.autoFocus}
      onFocus={() => setVisible(true)}
      onBlur={() => setTimeout(() => setVisible(false), 300)}
      onChange={onChange}

eabald

import { css } from '@emotion/css';

export const styles = {
  wrapper: css`
    position: relative;
  `,
  list: {
    ul: css`
      list-style: none;
      margin: 0 5px 10px;

eabald

type InnerTextValue = { kind: 'null'; prev: string } | { kind: 'value'; value: string };

type TextValue =
  | { kind: 'create'; inner: InnerTextValue }
  | { kind: 'update'; inner: InnerTextValue; initial: InnerTextValue };

eabald

import React, { useState, useEffect, useCallback } from 'react';
import {
  controller as StandardController,
  Cell as StandardCell,
  CardValue as StandardCardValue,
} from '@keystone-6/core/fields/types/text/views';
import { FieldProps } from '@keystone-6/core/types';
import { FieldContainer, FieldLabel, TextInput } from '@keystone-ui/fields';
import { styles } from './styles';