Inputs change their order positions in safari

[Guest]

Hi All

I have spend all day trying to figure out why my text inputs changing their order position based on which one is being typed with no luck. Here is a video for this issue

https://1drv.ms/v/s!AuWdnCjLsV5DjNBaxEBhNmzNUUNDrg

It only happens in Safari. I haven't noticed this behaviour in any other explorer. The web page is written in React and has only 2 simple inputs for email and password wrapped in form element. I don't know if this is a common issue in safari or not and how to fix it. If not I will post a code here or whatever you will ask for.

Thanks in advance

[Nancy OShea]

What's the URL to your problem page online?

[Guest]

Hi Nancy

You can see that in perfobase.com

[Nancy OShea]

Personally, I don't like what's happening to input placeholder text on focus in any browser.  It's just weird.

Also the minified CSS is difficult to wade through.  Do a Ctrl+F (Find) for input-placeholder.  Start removing CSS rules that cause placeholder text to move. Maybe you can find the culprit that's causing Safari to go spastic.

[Guest]

Hi Nancy OShea​

I agree with you...I was just working on those inputs so I can reuse them in rest of the app but then I noticed this behaviour and I do nothing else but trying to figure it out since

I'm not sure if the problem is in css. I have made testing app with almost no css in it and it does the same thing there. (see video above) I have even tried to wrap each input in its own div and so on. I don't know if safari hasn't got a problem with form element somehow. If the inputs are outside form then it works but how can I use form without this behaviour in safari?

[Guest]

Sorry Nancy OShea​

Form has nothing to do with it either. I'm going crazy about this... I have tried to remove form but it didn't do anything... The reason is two way binding... Once I enable 2 way binding it start to do this behavior (marked as bold uderline)

    inputChangedHandler = (event, controlName) => {

        const updatedControls = {

            ...this.state.controls,

            [controlName]: {

                ...this.state.controls[controlName],

                value: event.target.value,

                valid: this.checkValidity(event.target.value, this.state.controls[controlName].validation),

                touched: true

            }

        };

        this.setState({ controls: updatedControls })

    }

.

.

.

    render() {

        const formElementArray = [];

        for (let key in this.state.controls) {

            formElementArray.push({

                id: key,

                config: this.state.controls[key]

            });

        }

        let form = formElementArray.map(formElement => (

            <Input

                key={formElement.id}

                elementType={formElement.config.elementType}

                elementConfig={formElement.config.elementConfig}

                value={formElement.config.value}

                invalid={!formElement.config.valid}

                shouldValidate={formElement.config.validation}

                touched={formElement.config.touched}

                changed={(event) => this.inputChangedHandler(event, formElement.id)}

                />

Question is how to fix that?

[BenPleysier]

I am not sure that the highlighted line is the culprit. To me it seems like a very standard procedure.

[Guest]

Hi BenPleysier​

Yes I know... I learned it from my teacher on udemy and it makes sense however it just gives this weird behaviour on Safari (only). I don't see any other reason... Once I've removed it it works fine. Is this some kinda bug in safari or how can I use 2 way binding without that behaviour?

[Nancy OShea]

I don't use React.  

[Guest]

HiNancy OShea​

Thanks for trying anyway. I really appreciate that

[BenPleysier]

Sorry, while I was typing, my machine bombed out on me. Here is the second part of my reply.

When I look at the resultant output, I see

<form>

  <div class="Input_Input__1qId9"><input class="Input_InputElement__3uXLx" type="email" value="">

    <div class="Input_PlaceholderDiv__2Mm-I">

      <div class="Input_Warning__2tVEZ">!</div><label class="Input_Placeholder__3MNKY">Email</label>

    </div>

  </div>

  <div class="Input_Input__1qId9"><input class="Input_InputElement__3uXLx" type="password" value="">

    <div class="Input_PlaceholderDiv__2Mm-I">

      <div class="Input_Warning__2tVEZ">!</div><label class="Input_Placeholder__3MNKY">Password</label>

    </div>

  </div>

  <div class="Login_CheckboxDiv__36_53">

    <div class="Login_BubbleError__2PELm">

      <div style="display: none;" class="Bubble_SpeechBubble__3q7XO"></div>

    </div>

    <div class="Checkbox_container__1pdS1"><input type="checkbox" readonly=""><span class="Checkbox_checkmark__1yZf6"></span><label class="Checkbox_label__3_ED_">Remember Me</label>

    </div>

  </div><button disabled="" class="Button_Button__2V2Yl Button_Success__2eiNc">LOGIN</button>

</form>

The relevant style rules are as follows:

.Input_PlaceholderDiv__2Mm-I {

  color: #b2bec3;

  -webkit-transform-origin: left center;

  transform-origin: left center;

  text-align: left;

  width: 100%;

  font-size: 1rem;

  padding: 10px 15px;

  display: block;

  position: absolute;

  margin-top: -40px;

  z-index: 2

}

.Input_Placeholder__3MNKY, .Input_PlaceholderDiv__2Mm-I {

  letter-spacing: .01em;

  box-sizing: border-box;

  pointer-events: none

}

If I had the time and I had Safari, I would start off by removing the placeholder div from the markup. See if that makes a difference to the swapping of the inputs.

Failing that, I would go where millions of other React users go, namely to one of their many forums some of which are listed here Where To Get Support – React

[Guest]

Hi BenPleysier​

I have already removed all css and divs. Basically I ended up with two naked input elements without placeholder or any other effects and the result was exactly the same

[BenPleysier]

OK. Thanks for your feedback. It looks like you have found the culprit. Like Nancy, I do not use React, instead I use a more recent framework called AppConnect. Good luck.

[Guest]

Hi BenPleysier​

Now I wish I knew about that AppConnect before I started to learn React Thanks for your help anyway... I really appreciate that. I hope someone will be able to help

[osgood-]

'Now I wish I knew about that AppConnect before I started to learn React'

No you don't.

React is the way to go currently, along with vue.js,  they are both accepted as industry standard workflows and you'll get jobs in the web-development industry. AppConnect is a niche front-end js framework which means you'll struggle to find a job within the industy, if there are any at all, its very rare. AppConnect is useful if youre just creating something for yourself and dont want to learn to code, a one off app, project, manage a website for a company etc, maybe if youre a freelancer who can source their own work. But beyond those situations you will have no-saleable skills to any other web-development company should you wish to find a job within the industry.

Stick to what you are doing IF you have the intention of building a web-development career. Once you gain coding experience with an industry accepted workflow you will be able to adapt quicky when the next 'in fashion' framework arrives. If a career in web-development is not what you are seeking then by all means use any workflow.

[BenPleysier]

React is the way to go currently, along with vue.js,  they are both accepted as industry standard workflows and you'll get jobs in the web-development industry.

Not sure what an accepted industry standard workflow is; I think industry adoption was meant.

As far as jobs are concerned, this pie chart shows the figures as of about one year ago/:

In comparison to a requirement of in-depth knowledge of JavaScript, you will find that the above mentioned frameworks/library will disappearinto thin air.

What makes Vue.js an attractive alternative is the fact that it combines all of the goodies of React.js and Angular.js and then some. 

App Connect is in many ways similar to Vue.js but has the advantage of being offered as a free extension for Dreamweaver.

Where Vue.js is open source and has a wide community surrounding its creator, former Google employee Evan You,  App Connect was created by DMXzone and is used for their Dreamweaver client side extensions. App Connect is also exclusively used in Wappler.

The comparison between App Connect and Vue.js is similar to the comparison between Foundation and Bootstrap, where one is developed by a formal organisation and the other is developed by a team of enthusiasts. No guesses which is the better in each of the categories.

[osgood-]

React and Angular are far more powerful than Vue.js. Vue.js is light weight easy to learn for the middle ground developer, which will most likely suit the majority, but the bigger players will use React, not so much Angular these days, its dying like most front end frameworks will do over a period of several years of being popular, thats why its best to learn vanilla javascript as that will never fade away, it will just keep getting better and better.

Not being open source is the biggest issue with AppConnect plus its NOT well documented so it will never be 'adopted' large scale as you put it. The programmers of AppConnect have zero financial interest to make it open source as its a commercial product.

I dont know which is better in terms of Foundation and Bootstrap as I have no interest in front-end frameworks, however I do know which is the most popular and has been widely adopted.

[Guest · Accepted solution]

BTW I have fixed the problem for now... Basically I found that Safari (only) mess up with array position ordering everytime something is updated in it. What I did was put re-sorting the array which holds all config for inputs and it works. I still think this is a safari bug becasue no other browser doing that

[priymaha]

Can you share the code for this? Even I am struggling with the same issue. Did you find any correct fix?