lightning:inputFieldに主従・参照項目を割り当て使用するときに気をつけた方がいいこと

lightning:inputFieldに主従・参照項目を割り当てて使う際に苦労したので
書き置きしておきます。

ちなみにwinter19の環境で確認しています。

確認に使うベースとなるコードはこちら

```html:component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
        <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
     	<div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>
    
</aura:component>  
```

##使用する参照項目を標準のページレイアウトに含めないと機能しない。
まずページレイアウトに含めた状態から
<img width="1107" alt="スクリーンショット 2019-02-01 23.05.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/241915/40d7dd78-12f3-0661-d896-91e32ae75a87.png">
入力フォーム
<img width="478" alt="スクリーンショット 2019-02-01 23.16.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/241915/7b3a49f8-2ab1-17a2-977e-4b06342c4419.png">
特に問題なく表示されています。

ではページレイアウトから参照項目を外します。
※主従項目は必須項目のため外せません。
<img width="1115" alt="スクリーンショット 2019-02-01 23.20.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/241915/ada9e98b-c593-df0d-395b-bf1882053b3e.png">
入力フォームを確認すると…
<img width="573" alt="スクリーンショット 2019-02-01 23.21.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/241915/110f6d22-045e-c407-6d9e-5355f82b3a02.png">
入力欄に「Select an item」と表示され、
フォーカスをあててもテキストが打ち込めるのみで、
ルックアップの機能が使えなくなります。


####対策：lightning:inputFieldに割り当てた参照項目は、ページレイアウトに含める。(参照のみでも可)

#####参考
- https://salesforce.stackexchange.com/questions/229323/lightningrecordform-with-lookup-to-account-object-does-not-work-bug-identifie/229328

##Enterキーを押すと、セットされている値がリセットあるいはセットされる。
冒頭のコードにテキスト項目を割り当てたlightning:inputFieldを追加しました。

```html:component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
        <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
       <!--テキスト項目追加-->
        <lightning:inputField fieldName="Text__c" disabled="{v.isReadOnly}"/>
     	<div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>
    
</aura:component>  
```

テキスト項目にフォーカスをあて、Enterキーを押すとフォーカスが参照項目に移り、値がリセットされます。
![Feb-01-2019 23-43-41.gif](https://qiita-image-store.s3.amazonaws.com/0/241915/16ca8e9e-7fe6-bfd5-a31c-b36c1a861275.gif)

####対策：該当箇所をspanタグで囲み、onkeydownでEnterキーを無効にする。

```html:component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <span onkeydown="{!c.preventEnterKey}" >
            <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
            <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
           <!--テキスト項目追加-->
            <lightning:inputField fieldName="Text__c" disabled="{v.isReadOnly}"/>
            <div class="slds-m-top_medium">
                <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
            </div>
        </span>
    </lightning:recordEditForm>
    
</aura:component>  
```
```javascript:controller
{(
    preventEnterKey: function ( cmp, event, helper ) {
        if ( event.which === 13 ) {
            event.preventDefault();
        }
    },
})
```

#####参考
- https://success.salesforce.com/issues_view?id=a1p3A00000031cqQAA
- https://salesforce.stackexchange.com/questions/155635/enter-key-pressed-inside-a-lightning-input

##disabledが効かない。
isReadOnlyのデフォルト値をtrueに設定して、入力フォームを確認

```html:component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="true" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
            <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
            <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
            <div class="slds-m-top_medium">
                <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
            </div>
    </lightning:recordEditForm>
    
</aura:component>
```
disabledになっておらず、編集可能
<img width="719" alt="スクリーンショット 2019-02-02 0.44.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/241915/9e3fcc74-b3eb-c978-5ffa-3432976a23ab.png">

####対策？：disabledっぽくするスタイルをあてる。

```html:component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <lightning:inputField fieldName="ReferenceObject__c" class="custom-disabled" />
        <lightning:inputField fieldName="ParentObject__c" class="custom-disabled" />
        
        <div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>
    
</aura:component>  
```

```css:style
.THIS {
    background: white;
}

.THIS .custom-disabled input {
    pointer-events: none;
    border: none;
}

.THIS .custom-disabled button {
    display: none;
}
```
見た目はこんな感じ
<img width="709" alt="スクリーンショット 2019-02-02 0.57.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/241915/e41fe1bd-764b-e45b-7886-d3a2c9d910b9.png">



#####参考
- https://salesforce.stackexchange.com/questions/212274/lightninginputfield-disabled-attribute
- https://success.salesforce.com/issues_view?id=a1p3A000000JWo7QAG

##最後に
すでに修正済み、仕様として記載されているなど
確認漏れがありましたら、ご指摘ください。
またもっと良い方法があれば、コメントお願いします。
最後まで読んでいただきありがとうございました。