react-autosuggest icon indicating copy to clipboard operation
react-autosuggest copied to clipboard

ability to derive Item key from item data

Open rmisio opened this issue 5 years ago • 0 comments

  • write a clear description of what this Pull Request is trying to achieve

I need to make an async direct dom modification to components that I return from renderSuggestion and I'm creating a ref to them, but I'm finding that at times they end up pointing to old dom elements. I think without a key being specified on <Item />, old elements are being recycled.

What this PR does is allows you to include a key property in the data returned from onSuggestionsFetchRequested which would then be used as the key prop on the <Item /> component.

I tested my use case with this change and it fixes my issue. No more unexpected/recycled DOM elements being referenced.

  • npm run build to see that you didn't break anything

Sorry, it is failing for me, but I don't know exactly what the problem is. Something with the prettier syntax?

> [email protected] prebuild /Users/rob/develop/deg-of-sep/react-autosuggest
> npm run prettier && npm run lint && npm test


> [email protected] prettier /Users/rob/develop/deg-of-sep/react-autosuggest
> prettier --single-quote --write

Usage: prettier [options] [file/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

Output options:

  -l, --list-different     Print the names of files that are different from Prettier's formatting.
  --write                  Edit files in-place. (Beware!)

Format options:

  --arrow-parens <avoid|always>
                           Include parentheses around a sole arrow function parameter.
                           Defaults to avoid.
  --no-bracket-spacing     Do not print spaces between brackets.
  --jsx-bracket-same-line  Put > on the last line instead of at a new line.
                           Defaults to false.
  --parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|vue|yaml>
                           Which parser to use.
  --print-width <int>      The line length where Prettier will try wrap.
                           Defaults to 80.
  --prose-wrap <always|never|preserve>
                           How to wrap prose.
                           Defaults to preserve.
  --no-semi                Do not print semicolons, except at the beginning of lines which may need them.
  --single-quote           Use single quotes instead of double quotes.
                           Defaults to false.
  --tab-width <int>        Number of spaces per indentation level.
                           Defaults to 2.
  --trailing-comma <none|es5|all>
                           Print trailing commas wherever possible when multi-line.
                           Defaults to none.
  --use-tabs               Indent with tabs instead of spaces.
                           Defaults to false.

Config options:

  --config <path>          Path to a Prettier configuration file (.prettierrc, package.json, prettier.config.js).
  --no-config              Do not look for a configuration file.
  --config-precedence <cli-override|file-override|prefer-file>
                           Define in which order config files and CLI options should be evaluated.
                           Defaults to cli-override.
  --no-editorconfig        Don't take .editorconfig into account when parsing configuration.
  --find-config-path <path>
                           Find and print the path to a configuration file for the given input file.
  --ignore-path <path>     Path to a file with patterns describing files to ignore.
                           Defaults to .prettierignore.
  --plugin <path>          Add a plugin. Multiple plugins can be passed as separate `--plugin`s.
                           Defaults to [].
  --plugin-search-dir <path>
                           Custom directory that contains prettier plugins in node_modules subdirectory.
                           Overrides default behavior when plugins are searched relatively to the location of Prettier.
                           Multiple values are accepted.
                           Defaults to [].
  --with-node-modules      Process files inside 'node_modules' directory.

Editor options:

  --cursor-offset <int>    Print (to stderr) where a cursor at the given position would move to after formatting.
                           This option cannot be used with --range-start and --range-end.
                           Defaults to -1.
  --range-end <int>        Format code ending at a given character offset (exclusive).
                           The range will extend forwards to the end of the selected statement.
                           This option cannot be used with --cursor-offset.
                           Defaults to Infinity.
  --range-start <int>      Format code starting at a given character offset.
                           The range will extend backwards to the start of the first line containing the selected statement.
                           This option cannot be used with --cursor-offset.
                           Defaults to 0.

Other options:

  --no-color               Do not colorize error messages.
  --file-info <path>       Extract the following info (as JSON) for a given file path. Reported fields:
                           * ignored (boolean) - true if file path is filtered by --ignore-path
                           * inferredParser (string | null) - name of parser inferred from file path
  -h, --help <flag>        Show CLI usage, or details about the given flag.
                           Example: --help write
  --insert-pragma          Insert @format pragma into file's first docblock comment.
                           Defaults to false.
  --loglevel <silent|error|warn|log|debug>
                           What level of logs to report.
                           Defaults to log.
  --require-pragma         Require either '@prettier' or '@format' to be present in the file's first docblock comment
                           in order for it to be formatted.
                           Defaults to false.
  --stdin                  Force reading input from stdin.
  --stdin-filepath <path>  Path to the file to pretend that stdin comes from.
  --support-info           Print support information as JSON.
  -v, --version            Print Prettier version.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prettier: `prettier --single-quote --write`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prettier script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rob/.npm/_logs/2020-05-23T17_16_03_565Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prebuild: `npm run prettier && npm run lint && npm test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rob/.npm/_logs/2020-05-23T17_16_03_584Z-debug.log

rmisio avatar May 23 '20 17:05 rmisio