plantain-00 / select2-component Goto Github PK

There is a problem in the TOP calculation for the select2-subscript-wrapper.
Yet in the sources, this appears right.
Probably a LESS configuration problem.

Version : 3.1.9

Environment: [email protected] & [email protected]

Expected:

select2.material .select2-subscript-wrapper {
    position: absolute;
    top: calc(100% - 1.72917em);
    font-size: 75%;
}

Actual:

select2.material .select2-subscript-wrapper {
    position: absolute;
    top: calc(98.27083%);
    font-size: 75%;
}

When a component implements the select2-react-component, but the containing component is closed or refreshed i get the following console error:

backend.js:6 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Select2 (created by SendLinkToOrderModal)
    in label (created by SendLinkToOrderModal)
    in div (created by SendLinkToOrderModal)
    in div (created by Modal)
    in div (created by Modal)
    in div (created by Modal)
    in div (created by Modal)
    in Modal (created by SendLinkToOrderModal)
    in SendLinkToOrderModal (created by CheckoutPage)

Is this something that can be addressed within the package?

Version(if relevant): 5.1.2

Environment(if relevant):ALL

Code(if relevant):

  /**
   * Sets the selected option based on a value. If no option can be
   * found with the designated value, the select trigger is cleared.
   */
  private _setSelectionByValue (value: any | any[]): void {
    if (this.option || (value !== undefined && value !== null)) {
      const isArray = Array.isArray(value)
      if (this.multiple && value && !isArray) {
        throw new Error('Non array value.')
      } else if (this.data) {
        this.select(common.getOptionByValue(this.data, value))
      } else if (this._control) {
        this._control.viewToModelUpdate(value)
      }

      this._changeDetectorRef.markForCheck()
    }
  }

Expected:

      if (this.multiple && value && !isArray) {
        throw new Error('Non array value.')
      } else if (this.data) {
        this.select(common.getOptionByValue(this.data, value))
      }

Actual:

      if (this.multiple && value && !isArray) {
        throw new Error('Non array value.')
      } else if (this.data) {
        this.select(common.getOptionByValue(this.data, value))
      } else if (this._control) {
        this._control.viewToModelUpdate(value)
      }

Version(if relevant): 5.10.4

Environment(if relevant): React 17.0.2

Code(if relevant):

// given:
selected: string | undefined;
data: Select2Data;
setSelected: (selected: string) => void;

// then:
<Select2
        data={data}
        value={selected}
        update={(v): void => setSelected(v as string)}
    />

Expected:

Functioning component

Actual:

Error: Unable to find node on an unmounted component.
    at findHostInstanceWithWarning (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24281:19)
    at Object.findDOMNode (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:24804:12)
    at Select2.componentDidMount (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/select2-react-component/dist/select2.js:124:65)
    at commitLifeCycles (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:20658:24)
    at commitLayoutEffects (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:23421:7)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
    at commitRootImpl (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:23146:9)
    at unstable_runWithPriority (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js:468:12)

I notice that there has been a multitude of releases, all the way up to 6.1.0, but they're not on NPM. Is there somewhere else this package is released to?

Hi, I have installed just now select2-component and I'm testing it:

• I loaded the component in my app.module.ts
• In the index.html I inserted the path of the css file (I had an error with the nosniff option but I have made some changes in the angular.json that seem to work)
• I have created a new component mytest and insert a select2 formcontrol inside the html file
• in the mytest.component.ts I have created a Select2Group and a Select2Option and a fake update function

When I launch ng server seems all fine but when I load my page http://localhost:4200/mytest I have this error on the angular console

ERROR TypeError: "groupOrOption is undefined"
    getOptionByValue http://localhost:4200/vendor.js:103203
    _setSelectionByValue http://localhost:4200/vendor.js:102841
    writeValue http://localhost:4200/vendor.js:102793
    set http://localhost:4200/vendor.js:102529
    updateProp http://localhost:4200/vendor.js:58428
    checkAndUpdateDirectiveInline http://localhost:4200/vendor.js:58183
    checkAndUpdateNodeInline http://localhost:4200/vendor.js:59486
    checkAndUpdateNode http://localhost:4200/vendor.js:59448
    debugCheckAndUpdateNode http://localhost:4200/vendor.js:60082
    debugCheckDirectivesFn http://localhost:4200/vendor.js:60042
    View_MyTestComponent_0 ng:///AppModule/MyTestComponent.ngfactory.js:27
    debugUpdateDirectives http://localhost:4200/vendor.js:60034
    checkAndUpdateView http://localhost:4200/vendor.js:59430
    callViewAction http://localhost:4200/vendor.js:59671
    execComponentViewsAction http://localhost:4200/vendor.js:59613
    checkAndUpdateView http://localhost:4200/vendor.js:59436
    callViewAction http://localhost:4200/vendor.js:59671
    execEmbeddedViewsAction http://localhost:4200/vendor.js:59634
    checkAndUpdateView http://localhost:4200/vendor.js:59431
    callViewAction http://localhost:4200/vendor.js:59671
    execComponentViewsAction http://localhost:4200/vendor.js:59613
    checkAndUpdateView http://localhost:4200/vendor.js:59436
    callWithDebugContext http://localhost:4200/vendor.js:60300
    debugCheckAndUpdateView http://localhost:4200/vendor.js:60002
    detectChanges http://localhost:4200/vendor.js:57811
    tick http://localhost:4200/vendor.js:54242
    tick http://localhost:4200/vendor.js:54242
    next http://localhost:4200/vendor.js:54133
    invoke http://localhost:4200/polyfills.js:2753
    onInvoke http://localhost:4200/vendor.js:53422
    invoke http://localhost:4200/polyfills.js:2752
    run http://localhost:4200/polyfills.js:2512
    run http://localhost:4200/vendor.js:53336
    next http://localhost:4200/vendor.js:54133
    schedulerFn http://localhost:4200/vendor.js:49638
    __tryOrUnsub http://localhost:4200/vendor.js:91150
    next http://localhost:4200/vendor.js:91088
    _next http://localhost:4200/vendor.js:91031
    next http://localhost:4200/vendor.js:91008
    next http://localhost:4200/vendor.js:90773
    emit http://localhost:4200/vendor.js:49622
    checkStable http://localhost:4200/vendor.js:53391
    onHasTask http://localhost:4200/vendor.js:53435
    hasTask http://localhost:4200/polyfills.js:2805
    _updateTaskCount http://localhost:4200/polyfills.js:2825
    _updateTaskCount http://localhost:4200/polyfills.js:2653
    runTask http://localhost:4200/polyfills.js:2574
    drainMicroTaskQueue http://localhost:4200/polyfills.js:2963
MyTestComponent.ngfactory.js:9:81

and the select is not visible in my page.

Any suggestion to solve it?
I'm a newbie in angular, so I dont know if I'm working in the right way.

Hi guys, nice work here!!!

I'm experiencing some weird issue:

Version: 5.1.1

Environment:

React Version: 15.6.1

Code:

I'm using the demo9 use case.

Expected:

No browser errors.

Actual:

Besides the component renders correctly the actual componentDidMount implementation raises the error Unable to find node on an unmounted component.

Would be better set the ref prop and find the component using it, I think this could solve the error raised.

Version(if relevant): 1.0.0

6.1.1

Environment(if relevant):

Code(if relevant):

 <AutoComplete 
          class="simpleapp-inputfield"
          v-bind="$attrs"        
          :data="listdata"          
          v-model="modelValue"
          @select="pickValue"
          @change="changeValue"
          @search="search"
          />

Expected:

it should work like select2, after select v-model store value and display selected text.

Actual:

no matter v-model or :value, after item from list it show as false, it work fine in select2 component

Version(if relevant): 3.1.6

Environment(if relevant): Angular

Expected:

To AOT compile

Actual:

ERROR in [...]/node_modules/select2-component/angular.component.d.ts.Select2.html (2,65): Property 'focused' is private and only accessible within class 'Select2'.

Version(if relevant): 4.0.0

Environment(if relevant):

Angular 5.0.0 Rxjs 5.5.2

Code(if relevant):

assigning something to (update) event in the template

Expected:

work

Actual:

main.module.chunk.js:1316 ERROR TypeError: Cannot read property 'subscribe' of undefined

Seems like the use of [email protected] is the issue (ngc does not support it...) seems to be working OK with typescript 2.4.2 though. (ngc for some reason will remove the update property from the class in typescript 2.6.1)
Another issue is the use of import { Subject } from "rxjs"; if you use import { Subject } from "rxjs/Subject" it will get just the Subject, this works better with the new "lettables" of rxjs 5.5

Version(if relevant): 1.0.0

5.8.4

Environment(if relevant):

Windows, React.

Code(if relevant):

let option: Select2Option = {
                value: 1),
                label: 'special option with class',
                classes: 'special-class-to-apply'
            }

Expected:

That the 'classes' string will be applied to the option.

Actual:

'Classes' doesnt seem to be taken into account when rendering the options.

Version(if relevant): 5.10.1

Environment(if relevant): React 16.8.6

Actual: When the select2 is opened and you scroll by dragging the scrollbar, if you go focus on the search input, the dropdown suddenly closes before typing.

Expected: Being able to use the search field correctly after scrolling using the scrollbar inside the dropdown.

Version(if relevant): 5.8.0

Environment(if relevant):

Code(if relevant):

Loading data after the page renders shows the data in the 'dropdown', however other items arent updated (e.g isSearchBoxVisible).

<Select2 data={this.state.dropdownOptions}
minCountForSearch={2}
multiple={true}
value={this.state.selectedUserIds}
update={value => this.handleUserChange(value)}>
</Select2>

//getting data:

public componentDidMount() {
        this.someDataCallBeforePromise()
            .promise
            .then(users => {

                let defaultUser = users.find(a => a.isDefaultUser);

                this.setState({
                    users,
                    dropdownOptions: this.data(users),
                    selectedUserIds: defaultUser ? [defaultUser.id.toString()] : []
                });
            });
    }

    public data(users: any[]): Select2Data {
        return $.map(users, (user: any): Select2Option => {
            const option: Select2Option = {                
                value: user.id,
                label: `${user.userName}(${user.emailAddress})`
            };
            return option;
        });
    }

Expected:

When updating data, from an empty array, and array.length becomes > minCountForSearch, i expect the search to become visible.

Actual:

When updating data, from an empty array, and array.length becomes > minCountForSearch, the search stays hidden.

Related:

Currently i have a workaround to set the minCountForSearch={0}, but that seems to cause the dropdown to close on any click, which is not ideal. Using keyboard controls keeps the dropdown open.

Version(if relevant): 1.0.0

Environment(if relevant):

Code(if relevant):

Happens in React Demo as well as my code.

Reproduce: Click on any scroll-handle, either hold or move...the dropdown closes.
Nuance: It doesnt always happen...for now it may be that this only happens when the mouse trigger is on top another interactive item below the dropdown (E.g. other select, button, input...)

Expected: Keep dropdown open until something is selected OR until clicking outside the dropdown.

Actual: Dropdown closes with any click.

Version(if relevant): 5.1.2

Environment(if relevant): All

Code(if relevant):

html { direction: rtl; }

Expected:

Everything to work about the same

Actual:

There is a side-scroller that in the end shows the drop-down always open.

You can test it with your examples (happens in all - angular, vue, react) just inspect and change the html direction to rtl

With nodejs 10.4.1 and npm 6.1.0, I have this problem with Ubuntu:

$ npm run dev

> select2-component@ dev /mnt/c/sources/select2-component
> export NODE_ENV=development && clean-scripts build

ngc -p packages/core/src
lessc packages/core/src/select2.less -sm=on > packages/core/src/select2.css
rimraf "packages/@(core|vue|react|angular)/demo/**/@(*.bundle-*.js|*.bundle-*.css)"
postcss packages/core/src/select2.css -o packages/core/dist/select2.css
cleancss packages/core/dist/select2.css -o packages/core/dist/select2.min.css
cleancss packages/core/dist/select2.min.css ./node_modules/github-fork-ribbon-css/gh-fork-ribbon.css -o packages/core/demo/index.bundle.css
ngc -p packages/core/demo
file2variable-cli --config packages/vue/src/file2variable.config.js
tsc -p packages/react/src
file2variable-cli packages/angular/src/index.template.html -o packages/angular/src/variables.ts --html-minify --base packages/angular/src
file to variable success.
Success: to "packages/angular/src/variables.ts".
ngc -p packages/angular/src
file to variable success.
Success: to "packages/vue/src/variables.ts".
tsc -p packages/vue/src
packages/react/src/index.tsx(3,25): error TS2307: Cannot find module 'select2-component'.
packages/react/src/index.tsx(4,15): error TS2307: Cannot find module 'select2-component'.
packages/react/src/index.tsx(145,45): error TS7006: Parameter 'groupOrOption' implicitly has an 'any' type.
packages/react/src/index.tsx(145,60): error TS7006: Parameter 'i' implicitly has an 'any' type.
packages/react/src/index.tsx(148,46): error TS7006: Parameter 'option' implicitly has an 'any' type.
packages/react/src/index.tsx(148,54): error TS7006: Parameter 'j' implicitly has an 'any' type.
packages/react/src/index.tsx(259,5): error TS2322: Type 'number' is not assignable to type 'Timer | undefined'.
Command failed: tsc -p packages/react/src

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! select2-component@ dev: `export NODE_ENV=development && clean-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the select2-component@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-06-25T15_39_35_141Z-debug.log

On Windows:

$ npm run dev

> select2-component@ dev C:\sources\select2-component
> export NODE_ENV=development && clean-scripts build

'export' n’est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! select2-component@ dev: `export NODE_ENV=development && clean-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the select2-component@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\CVeyssiere\AppData\Roaming\npm-cache\_logs\2018-06-25T15_44_33_861Z-debug.log

when i have a list of option that one of them is equals 0 then if i set the value of the select to 0 that will not trigger the change callback, you have to change this :

/**

• Sets the selected option based on a value. If no option can be

• found with the designated value, the select trigger is cleared.
  */
  private _setSelectionByValue(value: any | any[]): void {
  if (this.option # || (value || value === 0)) {
  const isArray = Array.isArray(value);
  if (this.multiple && value && !isArray) {
  throw new Error("Non array value.");
  } else if (this.data) {
  this.select(common.getOptionByValue(this.data, value));
  } else if (this._control) {
  this._control.viewToModelUpdate(value);
  }

   this._changeDetectorRef.markForCheck();
  

  }
  }

With the keyboard navigation, sometime the scroll position is wrong.

I have two select components. Component A has values 1 & 2 and component B should show values A and B if I select 1 in component A and should show values C and D if I select 2 in component A.
When I change the value from 1 to 2, I want component B to be cleared and replaced with the placeholder "None". How can I do that?

Hi,

I get the following warnings in the browser console, when using the Select2 react component:

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: Select2 index.js:1
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: Select2 index.js:1
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Select2 which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
....

Version(if relevant): 1.0.0

5.10

Environment(if relevant):

WIn, React

Expected:

When my data changes, i may want to be able to set a default option instead of the placeholder text.
For example, when i have a large amount of data, and dont want to load everything right away, i set a minimum search length of 4 chars before i load any data, however, a user can also navigate to the page with a known element (i.e. orderNumber) that has an exact match. So when a user comes to the page with an exact orderNumber, i want to load that data, and after it was loaded i want to select that item. Functionality afterwards allows the user to select a different order number through the normal search function.

Right now if i refresh the data, it shows up correctly. The functions that returns the selectedValue is called when i update the default value on my side, but the select2.value is not changing, so nothing is selected.

Actual:

Data updates, and is shown in the results dropdown. Value is not changed, and selection stays empty (shows placeholder).

Version(if relevant): 3.1.10 ( latest )

Environment(if relevant): Windows ( git bash )

Code(if relevant):

 npm i select2-component --save

Expected:

Actual:

npm ERR! 404 'types/node' is not in the npm registry.

Version(if relevant): 5.1.2

Environment(if relevant): Angular 5.2.4 with fullTemplateTypeCheck

Code(if relevant):

    "angularCompilerOptions" : {
        "skipMetadataEmit" : true,
        "fullTemplateTypeCheck" : true
    },

Expected:

No error on build.

Actual:

On build, we have this errors:

ERROR in node_modules\select2-angular-component\dist\index.component.d.ts.Select2.html(1,454): : Property 'label' does not exist on type 'Select2Option | Select2Option[]'.
  Property 'label' does not exist on type 'Select2Option[]'.
node_modules\select2-angular-component\dist\index.component.d.ts.Select2.html(1,353): : Property 'label' does not exist on type 'Select2Option | Select2Option[]'.
  Property 'label' does not exist on type 'Select2Option[]'.
node_modules\select2-angular-component\dist\index.component.d.ts.Select2.html(1,789): : Property 'length' does not exist on type 'Select2Option | Select2Option[]'.
  Property 'length' does not exist on type 'Select2Option'.

The Vue component has the input hidden all the time even past the minCountForSearch pre-metric with any number

Is there any way to close the dropdown from outside the component?
Scenario...user pastes a string that matches 1 item exactly, that item should be selected automatically, and triggers some other behavior in the app. Right now the dropdown will close after the user clicks anywhere else, but it would be more elegant if we could close it in code once the selection took place.

I hope angular 6 support is coming,
Putting this here so I can track the support progress.
Thanks!

Hi, is it possible to allow the user to keep his search-phrase as a new value, if it is not available yet? thanks

Version(if relevant): 3.0.0

Environment(if relevant): Angular 4.3.3

Code(if relevant):

      <select2 [data]="options"
               [value]="selectedId"
               (update)="select($event)"
      >
      </select2>

Expected:

popup to close when clicking outside

Actual:

popup only closes if you click outside and then move the mouse over the popup, probably has to do with ChangeDetectionStrategy.OnPush

I have been able to workaround this issue in an ugly way when I click outside I mark the component for check after 200 ms...

This is an issue for us...our system is a little on the older side, running typescript 3.1.3...when using your current react component the CI breaks...upgrading our typescript version to the latest fixes all the warnings in your package, but breaks a lot more things in ours....

Is there an option to build select2-component with a version prior to typescript 3.7?

Version(if relevant): 3.0.0

Environment(if relevant): Angular 4.3.3

Expected:

AOT to compile

Actual:

ERROR in Unexpected value 'Select2Component in [...]/node_modules/select2-component/angular.d.ts' declared by the module
'MainModule in [...]/src/app/main/main.module.ts'. Please add a @Pipe/@Directive/@component annotation.

Version(if relevant): 5.10.0

Environment(if relevant):

Code(if relevant):

after updating options and selected before doesnt exists it doesnt change to placeholder

Expected: placeholder

Actual: title from non existing option

Currently, I use you project for an Material application. If you are interest, when I will finish all my required points, I would push to you all my modifications.

The points are:

• Material style
• Form binding : FormControl / Error
• Keyboard navigation (with tab)
• Unicode search (supports accents)
• Change the search pattern on fly
• Options styling
• Hint message
• Position on top if no space on bottom (probably not necessary)

Example on Angular4:

<select2
    [(ngModel)]="value"
    [data]="data"
    formControlName="example"
    placeholder="Placeholder example"
    material
    [editPattern]="editPattern">
    <select2-hint>Message</select2-hint>
</select2>

Sorry, I test all my changes in my project, I can not compile your project on my computer.

Version(if relevant): 1.0.0

Environment(if relevant):

LinuxMint 20 All Browsers

Code(if relevant):

availableFloatingIpsForDetach[0]={
value : ip_addresses.associated_floating_ip_info.floating_ip_id,
label ;${ip_addresses.associated_floating_ip_info.floating_ip_address},
component = () => {return (
{ip_addresses.associated_floating_ip_info.floating_ip_address}

);
};
}
Select2 component
<Select2
data={availableFloatingIpsForDetach}
value={availableFloatingIpsForDetach[0]}
// placeholder='Available Floating IPs for Detach'
minCountForSearch={1}
update={(value) =>
this.setState({
selectedFloatingIpIDForDetach: value,
})
}
/>

// code here

Expected:

on start to show first element from data array

Actual:

on start shows empty input row of placeholder string if it persists.

Hi, the react component is missing the possibility to visually style the form-element. Could you please add className and id property to the Select2 class? thanks!

Version(if relevant): 1.0.0

It appears to remove this error you need to change Line 4 in vue.js from
import Component from "vue-class-component";
to
import component from "vue-class-component";
(Lowercase 'c')

Version: 6.1.0

I am used the library, when the component load first time render, then it will show the default placeholder, that is correct.

Now, my requirement is once the value is selected, I need to reset it back (like need to show the default placeholder)

Is there anyway to achieve this.

I need to reset it back when user click on the reset button (the external button), I already set the value to undefined/null but it not works in my case,

Please guide me on this. @plantain-00

Select2 has options for min/max search lenght before showing any search results:
https://select2.org/searching#minimum-search-term-length

Is there a plan to support these?

Version: 3.1.8

With specific case in my application I have this error:

ERROR TypeError: Cannot read property 'offsetTop' of null
    at Object.getLastScrollTopIndex [as e] (common.js:226)
    at Select2.toggleOpenAndClose (angular.component.js:220)
    at Object.eval [as handleEvent] (Select2.html:1)

It would be nice if there was an option to keep the search text as in AND keep the results current.

This would be helpful when filtering a list down to a few results, but then missclicking on a wrong item...if opening the dropdown again it would be nice if i could just select from the same results.

Alternatively it would also work if we could manually set the searchInput when using a customSearch function.