digitalfortress-tech / typeahead-standalone Goto Github PK

What happened?

Events added to the input element before using typeahead() are removed because the input element is cloned. Cloning does not copy events:

https://github.com/digitalfortress-tech/typeahead-standalone/blob/master/src/typeahead-standalone.ts#L93

Events added to the input field after using the typeahead() work fine.

Solution: Use event delegation on the parent span element instead of cloning the input element?

Affected version

v4.7.0

Reproduction URL

https://jsfiddle.net/r4f0h9yn/2/

How to reproduce?

1. Open console to see output
2. type something in the input field
3. console log should show 'added before' and 'added after', but only shows 'added after'

Browsers

No response

Relevant log output

No response

Additional context

No response

What happened?

Using vite v4.3.7 with vue 3.3.4. Latest version of typeahead-standalone.

Inserted the colors example into my page. Works great in dev mode but as soon as I build using vite and run in production I get this error --

Uncaught TypeError: Cannot read properties of undefined (reading 'webpackChunktypeahead')
at index-e65366ba.js:2156:108666
at index-e65366ba.js:2156:108754
at index-e65366ba.js:2156:108817
at index-e65366ba.js:2156:96746
at index-e65366ba.js:2156:96751
at index-e65366ba.js:2156:108822

Affected version

Latest

Reproduction URL

none

How to reproduce?

Use standard vue 3 example. Insert example code from typeahead-standalone. Run vite build. Deploy to web site.

Browsers

Chrome

Relevant log output

Uncaught TypeError: Cannot read properties of undefined (reading 'webpackChunktypeahead')
    at index-e65366ba.js:2156:108666
    at index-e65366ba.js:2156:108754
    at index-e65366ba.js:2156:108817
    at index-e65366ba.js:2156:96746
    at index-e65366ba.js:2156:96751
    at index-e65366ba.js:2156:108822

Additional context

No response

What happened?

Tested on TS 4.23.0 and 4.21.0. The site given is running 4.21.0. Issue found on Brave (Android), DDG (Android), and Chrome (Android)

Issue: When there are more than 1 input forms nearby, when submitting data(press enter key), rather than data being submitted, the input field just jumps to the second form. It affects only under certain condition.

Affected version

Latest

Reproduction URL

https://urltest.pages.dev

How to reproduce?

Issue Case

1. Visit https://urltest.pages.dev .
2. Type Bank, select one and submit data. You could see the alert, as well as the 2nd input form displayed.
3. Now simply click on the second form field, or somewhere outside the first input form.
4. Go to Form1 and type bank again and click on another suggestion and submit data.

You'll notice rather than submitting data, the pointer is now on the second form.

Another Case, but with Expected Output

1. Repeat the first 2 steps from above.
2. Now don't click anywhere outside the first form. Repeat step 4.

Now the data is submitted, as you'd see the alert as well as the other appropriate data.

This issue does not exist on Firefox or other FF variants.

Browsers

Chrome, Brave

Relevant log output

No response

Additional context

No response

Discussed in #58

Uncaught TypeError: this is undefined
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> some_sample-name.umd.js:370
    <anonymous> some_sample-name.umd.js:2
    <anonymous> some_sample-name.umd.js:3
typeahead-standalone.js:1:11429

import { resolve, dirname } from "path";
import { defineConfig } from "vite";

const __dirname = dirname(__filename);

export default defineConfig({
  build: {
    sourcemap: true,
    lib: {
      entry: resolve(__dirname, "src/main.ts"),
      name: "some_sample-name",
      formats: ["es", "umd"],
      fileName: (format) => `some_sample-name.${format}.js`,
    },
    minify: false,
  },
});

import typeahead from "typeahead-standalone";

function hello() {
  console.log("hello");
  typeahead;
}

What happened?

using with typescript throw the following error:

Error: node_modules/typeahead-standalone/dist/index.d.cts:23:32 - error TS2304: Cannot find name 'Dictionary'.

23   function typeahead<T extends Dictionary>(config: typeaheadConfig<T>): typeaheadResult<T>;
                                  ~~~~~~~~~~


Error: node_modules/typeahead-standalone/dist/index.d.cts:23:52 - error TS2304: Cannot find name 'typeaheadConfig'.

23   function typeahead<T extends Dictionary>(config: typeaheadConfig<T>): typeaheadResult<T>;
                                                      ~~~~~~~~~~~~~~~


Error: node_modules/typeahead-standalone/dist/index.d.cts:23:73 - error TS2304: Cannot find name 'typeaheadResult'.

23   function typeahead<T extends Dictionary>(config: typeaheadConfig<T>): typeaheadResult<T>;
                                                                           ~~~~~~~~~~~~~~~


Error: node_modules/typeahead-standalone/dist/index.d.cts:24:3 - error TS2666: Exports and export assignments are not permitted in module augmentations.

24   export default typeahead;

Affected version

v4.25.1

Reproduction URL

none

How to reproduce?

1. Use in a project with typescript
2. Install lastest version
3. try run project

Browsers

Chrome

Relevant log output

No response

Additional context

No response

Hello,

i am migrating a formular from jquery typeahead to typeahead-standalone in order to use a remote source.
Our api needs a generated signature for a request, so replacing the wildcard after the url()-callback doesn't work in our usecase.

Is there a way to get the frozenInput within the url()-callback?
Or is there an option to use the frozenInput as payload in a post request?

Regards
.nowrap

Originally posted by @nowrap in #64

What happened?

Expected behavior:
Setting hint:false in the typeahead options will not produce a tt-hint input element in the output html

Actual behavior:
A tt-hint input is created anyway, just not used for hinting

I don't want hinting, and the unused, mis-sized tt-hint input box is making a mess of my search box ui. If I go into devtools and manually delete the tt-hint input element, everything looks and works correctly.

Affected version

Latest

Reproduction URL

https://jsfiddle.net/j7xL59m8/

How to reproduce?

1. Set hint: false in the typeahead options
2. Notice that the tt-hint input box is still generated when the page is rendered

Browsers

Firefox, Chrome

Relevant log output

No response

Additional context

No response

What happened?

When we use remote typeahead option to get an ordered dataset from the server by input value, seems that suggestions pop up randomly whenever the input text matches the value, however, it doesn't follow dataset order to check and print matches. For example, if we have a dataset of 50 titles that starts with "tr" ordered by name from the server and after typeahead shows suggestions the first match is not equal to the first record from the dataset. It may lead to retrieving results less relevant causing a bad user experience.

Affected version

v4.17.0

Reproduction URL

https://codepen.io/stevens3/pen/WNgvrMN

How to reproduce?

1. Get a dataset with some titles ordered by the searched input value ("tr")
2. Click on the input
3. Type the text you are looking for, for example, "tr"
4. The first suggestion doesn't match the first record from the dataset

Browsers

Chrome, Brave

Relevant log output

No response

Additional context

No response

What happened?

The component is not displayed into Firefox browser (lastest)

In Chrome is working well

Affected version

Latest

Reproduction URL

none

How to reproduce?

Use the component into Firefox browser

Browsers

Firefox

Relevant log output

No errors

Additional context

In my case the workaround is set position: unset; into .tt-list element

Expected Behavior

When user type any query text it should be option to search start with string with exact match

Current Behavior

Its try to search anywhere in the string also not search exact query string

Possible Solution

There should be option of search where we can configure like exactmatch and search start with

Steps to Reproduce (for bugs)

1. type any word
2. its display list which match any charecotor of list

Context

its gives the list which not match whole exact word and start with that string

Tested on:

• Browser Name and version:
• Operating System and version (desktop or mobile): Any

What happened?

The HTML generated by the javascript is not valid. A span tag is created to wrap the original input element, a hint input is added, and then a div tag is also added into that span. It is not valid HTML to have a div tag inside a span.

Additionally, the readonly attribute is added to the hint input with the value of "true". The readonly attribute is a boolean value, but the string value of "true" is not a boolean. Boolean attributes should be set with no value at all.

On a side note, I have noticed that on pages that use Bootstrap the hidden input initially appears offset from the original input. A quick fix is to add the style "display: block" to the wrapping span (which would be needed if this were a div anyway).

One final note. The attributes of the original input are copied to the added hint input. The id attribute is not copied which is good, but if the original input has an aria-label that is copied. That attribute should not be copied.

Affected version

v4.18.0

Reproduction URL

https://codepen.io/niketpathak/pen/eYVdGNY

How to reproduce?

1. Use this javascript library in any browser.
2. Add bootstrap to the page.
3. Put an aria-label on the original input.

Browsers

Firefox, Chrome

Relevant log output

No response

Additional context

The codepen is just your default codepen. I don't see the need to create a custom codepen for this. I think the issues are pretty clear as is.

What happened?

Webpack results in an error in 4.25.0:

Module not found: Error: Package path ./dist/basic.css is not exported from package /home/raja/dev/typeahead-standalone-debug/node_modules/typeahead-standalone (see exports field in /home/raja/dev/typeahead-standalone-debug/node_modules/typeahead-standalone/package.json)

Affected version

v4.25.0, v4.25.1

Reproduction URL

NA -- local build

How to reproduce?

A minimal project to reproduce

1. npm init -y
2. npm install webpack webpack-cli typeahead-standalone css-loader style-loader --save-dev
3. Add index.js and webpack.config.js as described below
4. npm run build

index.js:

import typeahead from 'typeahead-standalone';
import 'typeahead-standalone/dist/basic.css';

window.typeahead=typeahead;

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  mode: 'development',
};

package.json

{
  "name": "typeahead-standalone-debug",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^7.1.1",
    "style-loader": "^4.0.0",
    "typeahead-standalone": "4.25.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}

Browsers

No response

Relevant log output

> [email protected] build
> webpack

asset bundle.js 19.3 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 14.1 KiB
  ./src/index.js 122 bytes [built] [code generated]
  ./node_modules/typeahead-standalone/dist/typeahead-standalone.es.js 14 KiB [built] [code generated]

ERROR in ./src/index.js 2:0-45
Module not found: Error: Package path ./dist/basic.css is not exported from package /typeahead-standalone-debug/node_modules/typeahead-standalone (see exports field in /typeahead-standalone-debug/node_modules/typeahead-standalone/package.json)

webpack 5.91.0 compiled with 1 error in 162 ms

Additional context

The same process works if typeahead-standalone is fixed to 4.24.0

What happened?

Tested on Firefox Mobile and Mull Browser.

Open FF mobile app(Android)

• Visit https://url.authifyweb.com/
• Type the the word nykaa. => 3 suggestions should appear
• select the word Nykaa, submit.

Result:
Received different results

• Nothing happens. the suggestions list gets closed, but nothing more.
• The tt-input form inserts few extra letters automatically.(See attached video)
• After submitting 3 or 4 times it works and submit the data.

Expected Output:
The word Nykaa gets selected and the a form to submit URL appears.

preventSubmit is: False

On chrome mobile it works as expected.

JS code: https://github.com/authifyWeb/authifyURL/blob/main/resources/script.js
repo : https://github.com/authifyWeb/authifyURL

Affected version

Latest

Reproduction URL

https://github.com/authifyWeb/authifyURL

How to reproduce?

Open FF mobile app(Android)

• Visit https://url.authifyweb.com/
• Type the the word nykaa. => 3 suggestions should appear
• select the word Nykaa, submit.

Browsers

Firefox

Relevant log output

No response

Additional context

No response

What happened?

When using the arrow key to select an item from the suggestions, sometimes nothing gets selected event though there are suggestions in the list. This happens only after the initial requests (caching?) for the pressed keys.

Affected version

v4.9.0

Reproduction URL

https://codepen.io/niketpathak/pen/ZExLeEw

How to reproduce?

1. go to the link
2. press keys: ab
3. press key: arrow down --> first item in list gets selected
4. press key: c
5. press key: arrow down --> first item in list gets selected
6. press 3 x backspace
7. press keys: ab
8. press key: arrow down --> first item in list gets selected
9. press key: c
10. press key: arrow down --> nothing gets selected from the list anymore, even though there are items in it. Also note, that the character c gets deleted. Pressing key up will select first item in the list

Browsers

No response

Relevant log output

No response

Additional context

No response

What happened?

Fixing issue#26 introduced a new bug. Appending the input to the parent element, moves it to the end of the DOM tree of the parent element. Probably insertBefore() should be used instead of appendChild() in https://github.com/digitalfortress-tech/typeahead-standalone/blob/master/src/typeahead-standalone.ts#L100

Affected version

v4.8.0

Reproduction URL

https://jsfiddle.net/57kbLsec/

How to reproduce?

note changed order of siblings in container element.

Browsers

No response

Relevant log output

No response

Additional context

No response

What happened?

Upon focus into the typeahead, before typing input, templates.empty displays a resultSet of defaultItems. The suggestions from these defaultItems can be clicked upon but you cannot arrow-down through the listed suggestions.

Instead, upon arrow-down, the suggestions disappear.

this behavior is displayed in the playground 1: colors option

Affected version

Latest

Reproduction URL

https://typeahead.digitalfortress.tech/#playground

How to reproduce?

1. focus on typeahead
2. key down arrow

Browsers

Chrome

Relevant log output

No response

Additional context

No response

This library is very useful for widget development where HTML is being injected into an unknown website, but the lack of namespacing of the core function threatens collisions. This library defines one global function called typeahead. I'm very concerned that should I use this library it will collide with my client's website. I'm injecting HTML directly into their pages as widgets.

So, although I do not have an example of such a collision I'm very wary about it. This is my suggested solution:

export default function digitalfortress$typeahead<T extends Dictionary>(config: typeaheadConfig<T>): typeaheadResult {

I understand such a central change to this library would necessitate a major version number and would cause a bit of documentation rewriting, but other than that I don't foresee much of a problem.

What happened?

using typeahead-standalone within an bootstrap 5 offcanvas component wont scroll content

Affected version

Latest

Reproduction URL

https://codepen.io/C-Alonso-C-Ortega/pen/RwOzdPK

How to reproduce?

1. create a basic example using bs5 offcanvas component together typeahead-standalone
2. open offcanvas
3. write a search term
4. get results an see that scroll doesnt happen
   note. reproduce issue using this example https://codepen.io/C-Alonso-C-Ortega/pen/RwOzdPK

Browsers

Chrome

Relevant log output

No response

Additional context

No response

What happened?

I'm triying to use typeahead-standalone in an existing webpack 4.46.0 project and get the following error when import the lib

 error  in ./node_modules/typeahead-standalone/dist/typeahead-standalone.js

Module parse failed: Unexpected token (134:38)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|               C = e.source.identity || w,
|               x = e.onSubmit || n,
>               O = e.source.dataTokens?.constructor === Array ? e.source.dataTokens : void 0,
|               L = {},
|               N = {},

Affected version

Latest

Reproduction URL

none

How to reproduce?

1. Use webpack 4.46
2. Import typeahead-standalone in your proyect
3. See the error on the console output

Browsers

Chrome

Relevant log output

ERROR  Failed to compile with 1 errors                                                                                       23:23:58
 error  in ./node_modules/typeahead-standalone/dist/typeahead-standalone.js

Module parse failed: Unexpected token (134:38)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|               C = e.source.identity || w,
|               x = e.onSubmit || n,
>               O = e.source.dataTokens?.constructor === Array ? e.source.dataTokens : void 0,
|               L = {},
|               N = {},

   844 modules

Additional context

I'm using the following ES6 modules import statement according the documentation and get error

// using ES6 modules
import typeahead from 'typeahead-standalone';

Triying to import directly from dist path also fails

import typeahead from 'typeahead-standalone/dist/typeahead-standalone';

What happened?

Working with your example.

There are 2 selections highlighted on the frontend , one with the keyboard selection and other with mouse hover

Affected version

Latest

Reproduction URL

https://codepen.io/niketpathak/pen/vYRKdNq

How to reproduce?

• Type the letter 'b'
• hover mouse over blue
• now use down arrow key

Browsers

Firefox

Relevant log output

No response

Additional context

What happened?

The display callback gets called for every item in the suggestion list instead of only once for the selected item.

Affected version

v4.10.0

Reproduction URL

https://jsfiddle.net/9xLhbzne/

How to reproduce?

1. type g
2. watch console, will output all items multiple times

Browsers

No response

Relevant log output

{
  label: "Gold"
}
{
  label: "Grey"
}
{
  label: "Green"
}
{
  label: "Gold"
}
{
  label: "Gold"
}
{
  label: "Gold"
}
{
  label: "Grey"
}
{
  label: "Green"
}
{
  label: "Gold"
}

Additional context

No response

What happened?

I haven't added anything new other than adding a onSubmit option to your existing code of accessing twitter data. onSubmit option for mouseclick and keystroke have different results.

Affected version

Latest

Reproduction URL

https://codepen.io/webVerts/pen/vYjNEGm

How to reproduce?

Go to the link.
Type in your name and complete the suggestion using mouse click and click enter.
An alert appears and click ok.
Open console log. You'll notice "SometihngSomething" messagge

Now go back and type your name again, this time complete autofilling using keystroke and click enter.
Alert appears, click ok.
Open console log. You can find the stringified data from twitter there, which wasn't available when using mouse.

Browsers

Brave

Relevant log output

No response

Additional context

No response

What happened?

Hi there 👋,

As of today the propagation of the native input event is currently commented as a result of a bug.

This way we are not able to react to any changes when the user selects a value from the suggestion-list. Is there already a solution how this will be handled in the future?

Affected version

Latest

Reproduction URL

https://github.com/digitalfortress-tech/typeahead-standalone/blob/70668092359607fee5cbebdde1e59bf94a2b8bc6/src/typeahead-standalone.ts#LL345C1-L346C1

How to reproduce?

1. Attach an input event handler to the input field
2. Type a prefix of a value and select a value from the suggestion list

Browsers

Chrome

Relevant log output

No response

Additional context

No response

When the selected item from the suggestions contains a reserved character, e.g. [ and backspace is pressed, the following error is thrown in updateHint(): unterminated character class

select item from list

press backspace