Button only partially clickable error

Question

I have a very strange error in which I can't figure out why the button is not clickable for the entire 'red area' of the button.

Attached below is the images of what happens.

When I move to the D character in send it becomes immediately not clickable. Everything for that matter to the right of the D character is not clickable either in the entire red space.

The HTML for the entire form is below. This is done using React, so I included that code just in case it's related for some reason.

import React, { Component } from 'react';
import { FormGroup, FormControl, Button } from "react-bootstrap";
import MaskedFormControl from 'react-bootstrap-maskedinput'

export default class defaultHomeForm extends Component {

    render(){
      return(
        <form onSubmit={this.props.handleSubmit}>
          <FormGroup
            controlId="formName"
            validationState={this.props.formValidation("name")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="name"
                placeholder="Name"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formPhone"
            validationState={this.props.formValidation("phone")}
            className="quote-fields"
          >
              <MaskedFormControl
                type='text'
                name='phone'
                mask='(111)-111-1111 x11111'
                placeholder="Phone"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formEmail"
            validationState={this.props.formValidation("email")}
            className="quote-fields"
          >
              <FormControl
                type="email"
                name="email"
                placeholder="Email"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formAddress"
            validationState={this.props.formValidation("address")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="address"
                placeholder="Address"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <div className="send-btn"><Button type="submit"><div className="send-btn-text">Send <i className="fa fa-angle-right"></i><i className="fa fa-angle-right"></i></div></Button></div>
        </form>
    );
  }
}

Obviously CSS is the first place to look for these errors so I have attached the portion of my SCSS file that is relevant here.

%send-btn {
    padding: 5px;
    .send-btn-text{
      background-color:red;
    }
    .btn {
        background: transparent;
        border: none;
        font-size: 25px;
        font-weight: 500;
        color: #fff;
        text-transform: uppercase;
        display: flex;
        align-items: center;

        &:hover{
            color: #1899d1;
        }
        i {
            &:first-child {
                padding-left: 5px;
            }
        }

    }
}

%quote-fields {
    padding: 0px 15px 10px;
    margin: 0px;

    .form-field {
        background: transparent;
        padding: 12px;
        height: 43px;
        margin-bottom: 12px;
        color: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdcdc78;
    }
}

If I'm missing any other SCSS/CSS you need to see let me know and I'll upload right away.

Things I have tried:

I have tried changing display to inline-block instead of flex, didn't work. I have tried adding a width to the control and still no go.

I'm not sure what is causing this strange effect. Any ideas are welcome and I'll try them right away.

I have also tried messing with the inspector to just change CSS properties on the fly (live) to see if I can get the area clickable somehow, still no luck.

I should mention I'm testing on a Mac using Google Chrome Version 67.0.3396.87

Attached is an image from the inspector showing the DIV should be just fine in theory.

Answer 1

Ok turns out I figured it out, thanks to the answer here: Only the left half of the button is clickable in IE

The image of the pool cleaner in my design was getting in the way because it was positioned absolutely.

By adding the CSS to that element pointer-events: none;

it fixed the issue.