calendar flash and position issue

oryam commented 7 years ago

Steps to reproduce and a minimal demo

What steps should we try in your demo to see the problem? Use the datepicker with an input field, a form group builder. Place the input field near the bottom of the page. Select a date in the calendar.
Plunker example Sorry, I do not have any live example.
If you cannot reproduce an issue with a plunker example, it's your environmental issue Yes, pretty sure. Any help would be appreciated.

Current behavior

When I select a date in the calendar, the calendar disappears and reappears (kind of "flash"). Maybe a side effect in my code or build. Something like : "I click in the calendar, the input field lose the focus, then the date is set and the focus is back to the input field, so it shows again the calendar"? Same issue when I enable the close button. When I click on the close button, the calendar flash and stay visible. I have to click outside of the calendar to make it disappear.
My input field is near the bottom of the page. The impact is that the calendar is displayed over the input field, so I do not see the cursor in the input field, and it does not let me guess that I can delete the content of the input field to clear the date.

                <md-input-container class="fiw-input">
                    <input mdInput 
                        formControlName="validityDate"
                        autocomplete="off"
                        maxlength="50"
                        ng2-datetime-picker
                        date-only="true"
                        date-format="{{dateFormat}}"
                        parse-format="{{dateFormat}}"
                        [min-date]="validityDateControl.min"
                    >
                </md-input-container>

@Component( {
    selector: 'my-form',
    template: require( './my-form.component.html' ),
    styles: [
        require( './my-form.component.scss' )
    ],
    providers: [DatePipe],
})
export class MyComponent implements OnInit {
    private dateFormat = 'YYYY/MM/DD'; // Momment date format.
    private validityDateControl: DateControl = new DateControl();
    // ...
    ngOnInit() {
        this.validityDateControl.min = moment().add( -1, 'd' ).toDate();
        this.buildForm();
    }

    private buildForm() {
        const today = moment().format( 'YYYY/MM/DD' );
        this.orderForm = this.fb.group( {
            'validityDate': [today, [Validators.nullValidator]],
            // ...
        }, { validator: this.createOrderValidator( this.validationMessages ) });
        // ...
        this.orderForm.valueChanges.subscribe( data => this.onValueChanged( data ) );
        this.onValueChanged(); // (re)set validation messages now
    }

    private onValueChanged( data?: any ) {
        if ( !this.orderForm ) { return; }

        const form = this.orderForm;
        for ( const field in this.formErrors ) {
            // clear previous error message (if any)
            if ( this.formErrors.hasOwnProperty( field ) ) {
                this.formErrors[field] = '';
                const control = form.get( field );
                if ( control && !control.valid ) {
                    const messages = this.validationMessages[field];
                    console.log( field, control.errors );
                    for ( const key in control.errors ) {
                        if ( messages.hasOwnProperty( key ) ) {
                            this.formErrors[field] += messages[key] + ' ';
                        }
                    }
                }
            }
        }
    }

Expected/desired behavior

The calendar should disappear after I selected a date in the calendar.
How to set the position of the calendar? Such as an option : position=TOP|LEFT|RIGHT|BOTTOM|AUTO? I could use static css, but I will have to manage case of window size, responsiveness, ...

Other information

I am using a modified AngularClass/angular2-webpack-starter project structure.
ng2-datetime-picker 0.14.4
Angular 2.4.9
Material 2 (angular/material2)
Webpack 2
Node v7.5.0, Npm v4.2.0

extract of my package.json

  "dependencies": {
    "@angular/common": "2.4.9",
    "@angular/compiler": "2.4.9",
    "@angular/core": "2.4.9",
    "@angular/flex-layout": "^2.0.0-rc.1",
    "@angular/forms": "2.4.9",
    "@angular/http": "2.4.9",
    "@angular/material": "2.0.0-beta.2",
    "@angular/platform-browser": "2.4.9",
    "@angular/platform-browser-dynamic": "2.4.9",
    "@angular/platform-server": "2.4.9",
    "@angular/router": "3.4.9",
    "@angularclass/conventions-loader": "^1.0.13",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "ag-grid": "8.1.1",
    "ag-grid-angular": "8.1.0",
    "angular2-infinite-scroll": "^0.3.4",
    "angular2-moment": "^1.2.0",
    "assets-webpack-plugin": "^3.5.1",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "intl": "^1.2.5",
    "moment": "^2.17.1",
    "ng2-datetime-picker": "^0.14.4",
    "rxjs": "^5.2.0",
    "sockjs-client": "1.1.2",
    "stompjs": "2.3.3",
    "typedjson": "0.1.5",
    "zone.js": "~0.7.7"
  },
  "devDependencies": {
    "@types/chai": "^3.4.35",
    "@types/core-js": "^0.9.35",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "^2.5.43",
    "@types/jquery": "^2.0.40",
    "@types/node": "^7.0.5",
    "@types/protractor": "^4.0.0",
    "@types/selenium-webdriver": "2.53.40",
    "@types/source-map": "^0.5.0",
    "@types/stompjs": "^2.3.0",
    "@types/uglify-js": "^2.6.28",
    "@types/webpack": "^2.2.7",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "3.0.8",
    "camelcase": "^4.0.0",
    "codelyzer": "~3.0.0-beta.3",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.2",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "file-loader": "^0.10.1",
    "gh-pages": "^0.12.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-template": "^4.0.0",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "istanbul-instrumenter-loader": "2.0.0",
    "json-loader": "^0.5.4",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs2-launcher": "^0.5.0",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.2",
    "node-sass": "^4.5.0",
    "parse5": "^3.0.2",
    "phantomjs-prebuilt": "^2.1.14",
    "protractor": "^5.1.1",
    "raw-loader": "0.5.1",
    "require-dir": "^0.3.1",
    "resolve-url-loader": "^2.0.2",
    "rimraf": "~2.6.1",
    "sass-loader": "^6.0.2",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "source-map-loader": "^0.1.6",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.2",
    "to-string-loader": "^1.1.5",
    "ts-helpers": "1.1.2",
    "ts-node": "^2.1.0",
    "tslint": "~4.5.1",
    "tslint-loader": "^3.4.3",
    "typedoc": "^0.5.7",
    "typescript": "2.2.1",
    "url-loader": "^0.5.8",
    "v8-lazy-parse-webpack-plugin": "^0.3.0",
    "webpack": "2.2.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "2.4.1",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^3.0.0",
    "yargs": "^7.0.1"
  },

allenhwkim commented 7 years ago

@oryam thanks for reporting this issue. I will try my best to re-produce your issue on my end, but it will be hard without a plunker example(since I have to create this). It will take a long time. Your plunker example would be helpful.

allenhwkim commented 7 years ago

I have tried, and this did not happen for me.

oryam commented 7 years ago

Ok. Thank you. I will keep you inform when I find something.

oryam commented 7 years ago

FYI. My issue is fixed with your new release 0.14.8 Maybe similar issue as #168

ng2-ui / datetime-picker

calendar flash and position issue #157