Hide/Remove "Create New" menu in react-select

// try this way
return (
      <CreatableSelect
        isClearable
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={colourOptions}
        noOptionsMessage={() => null}
        // isValidNewOption={() => true}
        // or `isValidNewOption={() => false}`
        promptTextCreator={() => false}
      />
    );

Disabling create label via formatCreateLabel={() => undefined} is the right direction but the menu list sill shows empty space instead of not showing at all which is what you may prefer.

You may want to hide the menu list completely when there is no option by setting the menu list display to none

  // Remember to define a unique id for your component in the constructor
  // so you can target the right menu list element to hide it
  id = "";
  constructor(props) {
    super(props);
    this.id = "react-select_" + Math.random().toFixed(8).slice(2);
  }

  handleInputChange = (inputValue: any, actionMeta: any) => {
    setTimeout(() => {
      const menuEl = document.querySelector(`#${this.id} [class*="-menu"]`);
      const menuListEl = document.querySelector(
        `#${this.id} [class*="MenuList"]`
      );

      if (
        menuListEl.children.length === 1 &&
        menuListEl.children[0].innerHTML === ""
      ) {
        menuEl.style.display = "none";
      } else {
        menuEl.style.display = "block";
      }
    });
  };

...

  <CreatableSelect
        id={this.id}
        onInputChange={this.handleInputChange}
        formatCreateLabel={() => undefined}
        ...
      />

Live Demo

If you want to hide the create new value message at all times while still being able to create new values, you have to use the prop formatCreateLabel as follows formatCreateLabel={() => undefined} when you define your CreatableSelect.

Just add these props:

menuIsOpen={false} and components={{ DropdownIndicator: null }}

Then handle onKeyDown and onInputChange event as explained in => https://react-select.com/creatable, have a look into "Multi-select text input" section

Here is the complete example:

import React, { Component } from 'react';

import CreatableSelect from 'react-select/creatable';

const components = {
  DropdownIndicator: null,
};

const createOption = (label: string) => ({
  label,
  value: label,
});

export default class CreatableInputOnly extends Component<*, State> {
  state = {
    inputValue: '',
    value: [],
  };

  handleChange = (value: any, actionMeta: any) => {
    this.setState({ value });
  };

  handleInputChange = (inputValue: string) => {
    this.setState({ inputValue });
  };

  handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
    const { inputValue, value } = this.state;

    if (!inputValue) return;

    switch (event.key) {
      case 'Enter':
      case 'Tab':
        this.setState({
          inputValue: '',
          value: [...value, createOption(inputValue)],
        });
        event.preventDefault();
    }
  };

  render() {
    const { inputValue, value } = this.state;

    return (
      <CreatableSelect
        components={components}
        inputValue={inputValue}
        isClearable
        isMulti
        menuIsOpen={false}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        onKeyDown={this.handleKeyDown}
        placeholder="Type something and press enter..."
        value={value}
      />
    );
  }
}

Just add

 <CreatableSelect
  components={{
    ...components,
    Menu: () => null
  }}
/>